windly-ui 1.0.1 → 1.0.2

package/ui-library/components/ColorPicker.vue

@@ -1,302 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, onMounted, watch } from "vue"
-
-const props = defineProps({
-  modelValue: { type: String, default: "" },
-  defaultValue: { type: String, default: "#ff0000" },
-  showOpacity: { type: Boolean, default: false },
-  disabled: { type: Boolean, default: false },
-  readonly: { type: Boolean, default: false },
-  flat: { type: Boolean, default: false },
-  square: { type: Boolean, default: false },
-  bordered: { type: Boolean, default: false },
-  borderRadius: { type: [String, Number], default: "12px" }
-})
-
-const emit = defineEmits(["update:modelValue"])
-
-const hue = ref(0)
-const opacity = ref(1)
-const pickedColor = ref({ r: 255, g: 0, b: 0 })
-
-const saturation = ref(100)
-const lightness = ref(50)
-
-const canvasRef = ref<HTMLCanvasElement | null>(null)
-
-const clamp = (v: number, min: number, max: number) =>
-  Math.min(max, Math.max(min, v))
-
-function rgbToHsl(r: number, g: number, b: number) {
-  r /= 255
-  g /= 255
-  b /= 255
-
-  const max = Math.max(r, g, b)
-  const min = Math.min(r, g, b)
-  let h = 0, s = 0
-  const l = (max + min) / 2
-
-  if (max !== min) {
-    const d = max - min
-    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
-
-    switch (max) {
-      case r: h = (g - b) / d + (g < b ? 6 : 0); break
-      case g: h = (b - r) / d + 2; break
-      case b: h = (r - g) / d + 4; break
-    }
-
-    h /= 6
-  }
-
-  return {
-    h: Math.round(h * 360),
-    s: Math.round(s * 100),
-    l: Math.round(l * 100)
-  }
-}
-
-function applyColor(color: string) {
-  if (color.startsWith("#")) {
-    const hex = color.replace("#", "")
-    const r = parseInt(hex.substring(0, 2), 16)
-    const g = parseInt(hex.substring(2, 4), 16)
-    const b = parseInt(hex.substring(4, 6), 16)
-
-    pickedColor.value = { r, g, b }
-
-    const hsl = rgbToHsl(r, g, b)
-    hue.value = hsl.h
-    saturation.value = hsl.s
-    lightness.value = hsl.l
-  }
-}
-
-function drawCanvas() {
-  const canvas = canvasRef.value
-  if (!canvas) return
-
-  const ctx = canvas.getContext("2d")!
-  const w = canvas.width
-  const h = canvas.height
-
-  ctx.clearRect(0, 0, w, h)
-
-  ctx.fillStyle = `hsl(${hue.value}, 100%, 50%)`
-  ctx.fillRect(0, 0, w, h)
-
-  const whiteGrad = ctx.createLinearGradient(0, 0, w, 0)
-  whiteGrad.addColorStop(0, "#fff")
-  whiteGrad.addColorStop(1, "transparent")
-  ctx.fillStyle = whiteGrad
-  ctx.fillRect(0, 0, w, h)
-
-  const blackGrad = ctx.createLinearGradient(0, 0, 0, h)
-  blackGrad.addColorStop(0, "transparent")
-  blackGrad.addColorStop(1, "#000")
-  ctx.fillStyle = blackGrad
-  ctx.fillRect(0, 0, w, h)
-}
-
-function sampleCanvasAt(sat: number, light: number) {
-  const canvas = canvasRef.value
-  if (!canvas) return
-
-  const ctx = canvas.getContext("2d")
-  if (!ctx) return
-
-  const w = canvas.width
-  const h = canvas.height
-
-  const x = clamp(Math.floor((sat / 100) * w), 0, w - 1)
-  const y = clamp(Math.floor(((100 - light) / 100) * h), 0, h - 1)
-
-  const pixel = ctx.getImageData(x, y, 1, 1).data
-
-  pickedColor.value = {
-    r: pixel[0]!,
-    g: pixel[1]!,
-    b: pixel[2]!
-  }
-}
-
-function emitColor() {
-  const { r, g, b } = pickedColor.value
-
-  if (props.showOpacity) {
-    emit("update:modelValue", `rgba(${r}, ${g}, ${b}, ${opacity.value})`)
-  } else {
-    emit("update:modelValue", `rgb(${r}, ${g}, ${b})`)
-  }
-}
-
-function pickSquare(e: MouseEvent) {
-  if (props.disabled || props.readonly) return
-
-  const canvas = canvasRef.value
-  if (!canvas) return
-
-  const rect = canvas.getBoundingClientRect()
-  const x = clamp(e.clientX - rect.left, 0, rect.width)
-  const y = clamp(e.clientY - rect.top, 0, rect.height)
-
-  saturation.value = Math.round((x / rect.width) * 100)
-  lightness.value = Math.round(100 - (y / rect.height) * 100)
-
-  sampleCanvasAt(saturation.value, lightness.value)
-  emitColor()
-}
-
-function pickHue(e: MouseEvent) {
-  if (props.disabled || props.readonly) return
-
-  const rect = (e.target as HTMLElement).getBoundingClientRect()
-  const y = clamp(e.clientY - rect.top, 0, rect.height)
-
-  hue.value = clamp(Math.round((y / rect.height) * 360), 0, 359)
-
-  drawCanvas()
-  sampleCanvasAt(saturation.value, lightness.value)
-  emitColor()
-}
-
-const squareCursor = computed(() => ({
-  left: `${saturation.value}%`,
-  top: `${100 - lightness.value}%`
-}))
-
-const hueCursor = computed(() => ({
-  top: `${(hue.value / 360) * 100}%`
-}))
-
-function toHex(v: number) {
-  return v.toString(16).padStart(2, "0")
-}
-
-const currentHex = computed(() => {
-  const { r, g, b } = pickedColor.value
-  return `#${toHex(r)}${toHex(g)}${toHex(b)}`
-})
-
-const displayHex = computed(() => {
-  if (!props.showOpacity) return currentHex.value
-
-  const alpha = Math.round(opacity.value * 255)
-    .toString(16)
-    .padStart(2, "0")
-
-  return currentHex.value + alpha
-})
-
-const displayColor = computed(() => {
-  const { r, g, b } = pickedColor.value
-
-  return props.showOpacity
-    ? `rgba(${r}, ${g}, ${b}, ${opacity.value})`
-    : `rgb(${r}, ${g}, ${b})`
-})
-
-function copy(text: string) {
-  navigator.clipboard.writeText(text).catch(() => {})
-}
-
-const containerClasses = computed(() => [
-  "p-4 w-fit space-y-4",
-  props.flat ? "" : "shadow-md bg-white",
-  props.bordered ? "border border-gray-300" : ""
-])
-
-const containerStyle = computed(() => ({
-  borderRadius: props.square ? "0px" : 
-    typeof props.borderRadius === "number"
-    ? `${props.borderRadius}px`
-    : props.borderRadius
-}))
-
-watch(
-  () => props.modelValue,
-  (val) => {
-    if (val) applyColor(val)
-  },
-  { immediate: true }
-)
-
-onMounted(() => {
-  const initial = props.modelValue || props.defaultValue
-  if (initial) applyColor(initial)
-  drawCanvas()
-  sampleCanvasAt(saturation.value, lightness.value)
-})
-</script>
-
-<template>
-  <div :class="containerClasses" :style="containerStyle" class="p-4 w-fit bg-white rounded-lg space-y-4">
-    <div class="flex gap-3">
-      <div class="relative">
-        <canvas
-          ref="canvasRef"
-          width="192"
-          height="192"
-          class="w-48 h-48 rounded cursor-crosshair border"
-          @click="pickSquare"
-        />
-        <div
-          class="absolute w-3 h-3 border-2 border-white rounded-full shadow -translate-x-1/2 -translate-y-1/2 pointer-events-none"
-          :style="squareCursor"
-        />
-      </div>
-
-      <div
-        class="relative w-6 h-48 rounded cursor-pointer"
-        style="background: linear-gradient(to bottom, red, yellow, lime, cyan, blue, magenta, red)"
-        @click="pickHue"
-      >
-        <div
-          class="absolute left-0 w-full h-1 bg-white shadow -translate-y-1/2 pointer-events-none"
-          :style="hueCursor"
-        />
-      </div>
-    </div>
-
-    <input
-      v-if="showOpacity"
-      type="range"
-      min="0"
-      max="1"
-      step="0.01"
-      v-model="opacity"
-      @input="emitColor"
-      class="w-full"
-    />
-
-    <div
-      class="h-12 rounded border"
-      :style="{ background: displayColor }"
-    />
-
-    <div class="text-sm space-y-2">
-
-      <div class="flex justify-between items-center">
-        <span>{{ displayHex }}</span>
-        <button @click="copy(displayHex)">Copy</button>
-      </div>
-
-      <div class="flex justify-between items-center">
-        <span>{{ displayColor }}</span>
-        <button @click="copy(displayColor)">Copy</button>
-      </div>
-
-    </div>
-
-  </div>
-</template>
-
-<style scoped>
-button {
-  font-size: 12px;
-  padding: 2px 6px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-}
-</style>

package/ui-library/components/Date.vue

@@ -1,240 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, watch } from "vue"
-import { useUiClasses } from './useUiClasses'
-import { uiProps } from "./uiProps";
-
-const props = defineProps({
-  modelValue: { type: [String, Array], default: "" },
-  multiDate: Boolean,
-  rangeDate: Boolean,
-  disabledDates: { type: Array as () => string[], default: () => [] },
-  format: { type: String, default: "DD-MM-YYYY" },
-  showHeader: { type: Boolean, default: true },
-  backgroundColor: { type: String, default: "white" },
-  bordered: { type: Boolean, default: false},
-  borderRadius: { type: String, default: "rounded-md", acceptedValues: ["none", "sm", "md", "lg", "xl"] },
-  flat: { type: Boolean, default: false },
-  color: { type: String, default: "indigo" },
-  textColor: uiProps.textColor,
-  contentClass: uiProps.contentClass,
-  contentStyle: uiProps.contentStyle,
-  disable: uiProps.disable,
-})
-
-const {
-  isHex,
-} = useUiClasses(props)
-
-const emit = defineEmits(["update:modelValue", "change"])
-
-const today = new Date()
-
-const currentMonth = ref(today.getMonth())
-const currentYear = ref(today.getFullYear())
-
-const selectedDates = ref<string[]>([])
-const rangeStart = ref<number | null>(null)
-const rangeEnd = ref<number | null>(null)
-
-const headerLabel = computed(() => {
-  const first = selectedDates.value[0]
-  if (!first) return "No date selected"
-
-  const date = new Date(first)
-
-  const dayName = date.toLocaleDateString("default", {
-    weekday: "long"
-  })
-
-  return dayName
-})
-
-const daysInMonth = computed(() => {
-  return new Date(currentYear.value, currentMonth.value + 1, 0).getDate()
-})
-
-const blankDays = computed(() => {
-  return new Date(currentYear.value, currentMonth.value, 1).getDay()
-})
-
-const days = computed(() =>
-  Array.from({ length: daysInMonth.value }, (_, i) => i + 1)
-)
-
-function formatDate(day: number): string {
-  const d = new Date(currentYear.value, currentMonth.value, day)
-  const year = d.getFullYear()
-  const month = String(d.getMonth() + 1).padStart(2, '0')
-  const date = String(d.getDate()).padStart(2, '0')
-  return `${year}-${month}-${date}`
-}
-
-function formatDateString(date: Date, format: string): string {
-  const map = {
-    YYYY: String(date.getFullYear()),
-    MM: String(date.getMonth() + 1).padStart(2, '0'),
-    DD: String(date.getDate()).padStart(2, '0'),
-    HH: String(date.getHours()).padStart(2, '0'),
-    mm: String(date.getMinutes()).padStart(2, '0'),
-    ss: String(date.getSeconds()).padStart(2, '0'),
-  }
-
-  return format.replace(/YYYY|MM|DD|HH|mm|ss/g, (match) => {
-    return map[match as keyof typeof map]
-  })
-}
-
-function isDisabled(day: number) {
-  return props.disabledDates.includes(formatDate(day))
-}
-
-function isSelected(day: number) {
-  return selectedDates.value.includes(formatDate(day))
-}
-
-function isToday(day: number) {
-  const d = new Date()
-  return (
-    day === d.getDate() &&
-    currentMonth.value === d.getMonth() &&
-    currentYear.value === d.getFullYear()
-  )
-}
-
-function isInRange(day: number) {
-  if (rangeStart.value === null || rangeEnd.value === null) return false
-  const start = Math.min(rangeStart.value, rangeEnd.value)
-  const end = Math.max(rangeStart.value, rangeEnd.value)
-  return day >= start && day <= end
-}
-
-function dayClasses(day: number) {
-  if (isDisabled(day)) return "text-gray-300 cursor-not-allowed"
-
-  if (isSelected(day))
-    return `bg-${props.color}-600 text-white font-medium`
-
-  if (props.rangeDate && isInRange(day))
-    return `bg-${props.color}-100 text-${props.color}-700`
-
-  if (isToday(day))
-    return `border border-${props.color}-500`
-
-  return "hover:bg-gray-100"
-}
-
-function selectDate(day: number) {
-  if (isDisabled(day)) return
-
-  const value = formatDate(day)
-
-  if (props.multiDate) {
-    if (selectedDates.value.includes(value)) {
-      selectedDates.value = selectedDates.value.filter(d => d !== value)
-    } else {
-      selectedDates.value.push(value)
-    }
-  } else if (props.rangeDate) {
-    if (rangeStart.value === null) {
-      rangeStart.value = day
-      rangeEnd.value = null
-    } else {
-      rangeEnd.value = day
-      selectedDates.value = buildRange()
-    }
-  } else {
-    selectedDates.value = [value]
-  }
-
-  emit("update:modelValue", selectedDates.value)
-  emit("change", selectedDates.value)
-}
-
-function buildRange() {
-  if (rangeStart.value === null || rangeEnd.value === null) return []
-
-  const start = Math.min(rangeStart.value, rangeEnd.value)
-  const end = Math.max(rangeStart.value, rangeEnd.value)
-
-  const range: string[] = []
-  for (let i = start; i <= end; i++) {
-    range.push(formatDate(i))
-  }
-  return range
-}
-
-function nextMonth() {
-  if (currentMonth.value === 11) {
-    currentMonth.value = 0
-    currentYear.value++
-  } else currentMonth.value++
-}
-
-function prevMonth() {
-  if (currentMonth.value === 0) {
-    currentMonth.value = 11
-    currentYear.value--
-  } else currentMonth.value--
-}
-
-watch(
-  () => props.modelValue,
-  (val) => {
-    if (!val) return
-    if (Array.isArray(val)) {
-      selectedDates.value = val as string[]
-    } else {
-      selectedDates.value = [val]
-    }
-  },
-  { immediate: true }
-)
-</script>
-
-<template>
-  <div class="w-80 min-w-80" :class="[
-    borderRadius ? `rounded-${borderRadius}` : '',
-    bordered ? 'border border-gray-200' : '',
-    flat ? '' : 'shadow-md',
-    textColor && !isHex(textColor) ? `text-${textColor}` : 'text-gray-800',
-    backgroundColor && !isHex(backgroundColor) ? `bg-${backgroundColor}` : ''
-  ]" :style="{
-    backgroundColor: isHex(backgroundColor) ? backgroundColor : '',
-    color: isHex(textColor) ? textColor : ''
-  }">
-    <div v-if="showHeader" class="px-4 py-3 flex justify-between items-center"
-      :class="bordered ? 'border-b border-gray-200' : ''">
-      <div class="text-sm font-semibold text-gray-700">
-        <div v-if="multiDate">{{ selectedDates.length }} selected</div>
-        <div v-else>
-          <div class="text-lg" :class="`text-${color}-600`">{{ headerLabel }}</div>
-          <div class="text-gray-700">
-            {{ selectedDates[0] ? formatDateString(new Date(selectedDates[0]), format) : '' }}
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="flex items-center justify-between px-4 py-2">
-      <button @click="prevMonth" class="p-1 rounded hover:bg-gray-100">‹</button>
-      <div class="text-sm font-medium text-gray-800">
-        {{ new Date(currentYear, currentMonth).toLocaleString('default', { month: 'long' }) }}
-        {{ currentYear }}
-      </div>
-      <button @click="nextMonth" class="p-1 rounded hover:bg-gray-100">›</button>
-    </div>
-    <div class="grid grid-cols-7 text-xs font-medium text-center text-gray-500 px-3 mb-1">
-      <div v-for="d in ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']" :key="d">
-        {{ d }}
-      </div>
-    </div>
-    <div class="grid grid-cols-7 gap-1 px-3 pb-3">
-      <div v-for="n in blankDays" :key="'b' + n"></div>
-      <div v-for="day in days" :key="day" @click="selectDate(day)"
-        class="h-10 flex items-center justify-center text-sm rounded-lg cursor-pointer transition-all duration-150"
-        :class="dayClasses(day)">
-        {{ day }}
-      </div>
-    </div>
-
-  </div>
-</template>