windly-ui 1.0.2 → 1.0.4

package/dist/runtime/components/CodeBlock.vue

@@ -0,0 +1,75 @@
+<script setup>
+import { ref, useSlots, computed, isVNode } from "vue";
+defineProps({
+  title: { type: String, required: false }
+});
+const activeTab = ref("example");
+const slots = useSlots();
+function stringifyProps(props) {
+  if (!props || typeof props !== "object") {
+    return "";
+  }
+  return Object.entries(props).filter(([key]) => !key.startsWith("on")).map(([key, value]) => {
+    if (value === true) return key;
+    if (value === false || value == null) return "";
+    return `${key}="${String(value)}"`;
+  }).filter(Boolean).join(" ");
+}
+function renderVNode(vnode) {
+  if (typeof vnode.children === "string") {
+    return vnode.children;
+  }
+  if (vnode.type === /* @__PURE__ */ Symbol.for("v-fgt")) {
+    return vnode.children.map(renderVNode).join("");
+  }
+  if (typeof vnode.type === "object") {
+    const typeAny = vnode.type;
+    const name = typeAny.__name || typeAny.name || typeAny.displayName || "Component";
+    const props = stringifyProps(vnode.props);
+    return `<${name}${props ? " " + props : ""} />`;
+  }
+  if (typeof vnode.type === "string") {
+    const children = Array.isArray(vnode.children) ? vnode.children.map((child) => isVNode(child) ? renderVNode(child) : typeof child === "string" ? child : "").join("") : typeof vnode.children === "string" ? vnode.children : "";
+    return `<${vnode.type}>${children}</${vnode.type}>`;
+  }
+  return "";
+}
+const slotCode = computed(() => {
+  const vnodes = slots.default?.() || [];
+  return vnodes.map(renderVNode).join("");
+});
+const buttonIcon = ref("content_copy");
+const copyCode = async () => {
+  await navigator.clipboard.writeText(slotCode.value);
+  buttonIcon.value = "check";
+  setTimeout(() => {
+    buttonIcon.value = "content_copy";
+  }, 2e3);
+};
+</script>
+
+<template>
+    <div class="border rounded-lg bg-white overflow-hidden">
+        <!-- Header -->
+        <div class="flex items-center justify-between px-4 py-2 border-b bg-gray-50">
+            <h3 v-if="title" class="font-medium text-gray-700">
+                {{ title }}
+            </h3>
+
+            <UIButton flat :icon="buttonIcon" size="sm" class="text-gray-600" @click="copyCode" />
+        </div>
+
+        <!-- Tabs -->
+        <UITabs v-model="activeTab">
+            <UITabPanel name="example" label="Example">
+                <div class="p-4">
+                    <slot />
+                </div>
+            </UITabPanel>
+
+            <UITabPanel name="code" label="Code">
+                <pre class="p-4 bg-gray-900 text-gray-100 text-sm overflow-x-auto"><code>{{ slotCode }}</code></pre>
+            </UITabPanel>
+        </UITabs>
+    </div>
+</template>

package/dist/runtime/components/CodeBlock.vue.d.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    title?: string;
+};
+declare var __VLS_20: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_20) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ColorPicker.d.vue.ts

@@ -0,0 +1,91 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    defaultValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    showOpacity: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    flat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    square: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    bordered: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    borderRadius: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    defaultValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    showOpacity: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    flat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    square: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    bordered: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    borderRadius: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    modelValue: string;
+    disabled: boolean;
+    flat: boolean;
+    square: boolean;
+    bordered: boolean;
+    defaultValue: string;
+    showOpacity: boolean;
+    readonly: boolean;
+    borderRadius: string | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ColorPicker.vue

@@ -0,0 +1,244 @@
+<script setup>
+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(null);
+const clamp = (v, min, max) => Math.min(max, Math.max(min, v));
+function rgbToHsl(r, g, b) {
+  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) {
+  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, light) {
+  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) {
+  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) {
+  if (props.disabled || props.readonly) return;
+  const rect = e.target.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) {
+  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) {
+  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{border:1px solid #ccc;border-radius:4px;font-size:12px;padding:2px 6px}
+</style>

package/dist/runtime/components/ColorPicker.vue.d.ts

@@ -0,0 +1,91 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    defaultValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    showOpacity: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    flat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    square: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    bordered: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    borderRadius: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    defaultValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    showOpacity: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    flat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    square: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    bordered: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    borderRadius: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    modelValue: string;
+    disabled: boolean;
+    flat: boolean;
+    square: boolean;
+    bordered: boolean;
+    defaultValue: string;
+    showOpacity: boolean;
+    readonly: boolean;
+    borderRadius: string | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Date.d.vue.ts

@@ -0,0 +1,137 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: (StringConstructor | ArrayConstructor)[];
+        default: string;
+    };
+    multiDate: BooleanConstructor;
+    rangeDate: BooleanConstructor;
+    disabledDates: {
+        type: () => string[];
+        default: () => never[];
+    };
+    format: {
+        type: StringConstructor;
+        default: string;
+    };
+    showHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    backgroundColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    bordered: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    borderRadius: {
+        type: StringConstructor;
+        default: string;
+        acceptedValues: string[];
+    };
+    flat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    textColor: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    contentClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    contentStyle: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    disable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+    change: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: (StringConstructor | ArrayConstructor)[];
+        default: string;
+    };
+    multiDate: BooleanConstructor;
+    rangeDate: BooleanConstructor;
+    disabledDates: {
+        type: () => string[];
+        default: () => never[];
+    };
+    format: {
+        type: StringConstructor;
+        default: string;
+    };
+    showHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    backgroundColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    bordered: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    borderRadius: {
+        type: StringConstructor;
+        default: string;
+        acceptedValues: string[];
+    };
+    flat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    textColor: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    contentClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    contentStyle: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    disable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+}>, {
+    modelValue: string | unknown[];
+    contentClass: string;
+    contentStyle: string;
+    textColor: string;
+    disable: boolean;
+    color: string;
+    backgroundColor: string;
+    flat: boolean;
+    bordered: boolean;
+    borderRadius: string;
+    multiDate: boolean;
+    rangeDate: boolean;
+    disabledDates: string[];
+    format: string;
+    showHeader: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;