windly-ui 1.0.2 → 1.0.3

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

@@ -0,0 +1,190 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    contentClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    contentStyle: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    textColor: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    disable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: "blue-900";
+    };
+    rounded: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    size: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    iconSize: {
+        readonly type: StringConstructor;
+        readonly default: "lg";
+    };
+    modelValue: {
+        required: true;
+    };
+    name: {
+        type: StringConstructor;
+        default: null;
+    };
+    label: {
+        type: StringConstructor;
+        default: null;
+    };
+    trueValue: {
+        default: boolean;
+    };
+    falseValue: {
+        default: boolean;
+    };
+    intermediateValue: {
+        default: null;
+    };
+    checkedIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    uncheckedIcon: {
+        type: StringConstructor;
+        default: null;
+    };
+    intermediateIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    checkedColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    uncheckedColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    dense: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    contentClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    contentStyle: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    textColor: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    disable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: "blue-900";
+    };
+    rounded: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    size: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    iconSize: {
+        readonly type: StringConstructor;
+        readonly default: "lg";
+    };
+    modelValue: {
+        required: true;
+    };
+    name: {
+        type: StringConstructor;
+        default: null;
+    };
+    label: {
+        type: StringConstructor;
+        default: null;
+    };
+    trueValue: {
+        default: boolean;
+    };
+    falseValue: {
+        default: boolean;
+    };
+    intermediateValue: {
+        default: null;
+    };
+    checkedIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    uncheckedIcon: {
+        type: StringConstructor;
+        default: null;
+    };
+    intermediateIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    checkedColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    uncheckedColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    dense: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {
+    dense: boolean;
+    label: string;
+    name: string;
+    contentClass: string;
+    contentStyle: string;
+    textColor: string;
+    disable: boolean;
+    loading: boolean;
+    color: string;
+    rounded: string;
+    size: string;
+    iconSize: string;
+    trueValue: boolean;
+    falseValue: boolean;
+    intermediateValue: null;
+    checkedIcon: string;
+    uncheckedIcon: string;
+    intermediateIcon: string;
+    checkedColor: string;
+    uncheckedColor: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Checkbox.vue

@@ -0,0 +1,125 @@
+<script setup>
+defineOptions({ inheritAttrs: false });
+import { computed } from "vue";
+import { useUiClasses } from "./useUiClasses";
+import { uiProps } from "./uiProps";
+const emit = defineEmits(["update:modelValue"]);
+const props = defineProps({
+  modelValue: { required: true },
+  name: { type: String, default: null },
+  label: { type: String, default: null },
+  trueValue: { default: true },
+  falseValue: { default: false },
+  intermediateValue: { default: null },
+  checkedIcon: { type: String, default: "check" },
+  uncheckedIcon: { type: String, default: null },
+  intermediateIcon: { type: String, default: "remove" },
+  checkedColor: { type: String, default: "" },
+  uncheckedColor: { type: String, default: "gray-400" },
+  dense: { type: Boolean, default: false },
+  ...uiProps
+});
+const {
+  disable,
+  color,
+  size,
+  rounded,
+  roundedClass
+} = useUiClasses(props);
+const isChecked = computed(
+  () => props.modelValue === props.trueValue
+);
+const isIntermediate = computed(
+  () => props.modelValue === props.intermediateValue
+);
+const boxSizeClass = computed(() => {
+  const map = {
+    sm: "w-4 h-4",
+    md: "w-5 h-5",
+    lg: "w-6 h-6"
+  };
+  return map[size.value];
+});
+const labelSizeClass = computed(() => {
+  const map = {
+    sm: "text-sm",
+    md: "text-base",
+    lg: "text-xl"
+  };
+  return map[size.value];
+});
+const boxColorClass = computed(() => {
+  if (isChecked.value) {
+    return `bg-${props.checkedColor || color.value} border-${props.checkedColor || color.value}`;
+  }
+  if (isIntermediate.value) {
+    return `bg-${color.value} border-${color.value}`;
+  }
+  return `bg-transparent border-${props.uncheckedColor}`;
+});
+const containerClass = computed(
+  () => `
+  inline-flex items-center gap-2
+  ${disable.value ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
+  `
+);
+function toggle() {
+  if (disable.value) return;
+  if (isChecked.value || isIntermediate.value) {
+    emit("update:modelValue", props.falseValue);
+  } else {
+    emit("update:modelValue", props.trueValue);
+  }
+}
+</script>
+
+<template>
+  <label
+    :class="containerClass"
+    role="checkbox"
+    :aria-checked="isIntermediate ? 'mixed' : isChecked"
+  >
+    <input
+      type="checkbox"
+      class="hidden"
+      :name="name"
+      :disabled="disable"
+      @change="toggle"
+    />
+
+    <span
+      :class="[
+  'flex items-center justify-center border transition-all duration-200 p-2',
+  boxSizeClass,
+  roundedClass[rounded],
+  boxColorClass
+]"
+      @click.prevent="toggle"
+    >
+      <i
+        v-if="isChecked && checkedIcon"
+        :class="labelSizeClass"
+        class="material-icons text-white"
+      >
+        {{ checkedIcon }}
+      </i>
+      <i
+        v-else-if="isIntermediate && intermediateIcon"
+        :class="labelSizeClass"
+        class="material-icons text-white"
+      >
+        {{ intermediateIcon }}
+      </i>
+      <i
+        v-else-if="uncheckedIcon"
+        :class="labelSizeClass"
+        class="material-icons text-gray-400"
+      >
+        {{ uncheckedIcon }}
+      </i>
+    </span>
+    <span v-if="label" class="select-none" :class="labelSizeClass">
+      {{ label }}
+    </span>
+  </label>
+</template>

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

@@ -0,0 +1,190 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    contentClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    contentStyle: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    textColor: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    disable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: "blue-900";
+    };
+    rounded: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    size: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    iconSize: {
+        readonly type: StringConstructor;
+        readonly default: "lg";
+    };
+    modelValue: {
+        required: true;
+    };
+    name: {
+        type: StringConstructor;
+        default: null;
+    };
+    label: {
+        type: StringConstructor;
+        default: null;
+    };
+    trueValue: {
+        default: boolean;
+    };
+    falseValue: {
+        default: boolean;
+    };
+    intermediateValue: {
+        default: null;
+    };
+    checkedIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    uncheckedIcon: {
+        type: StringConstructor;
+        default: null;
+    };
+    intermediateIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    checkedColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    uncheckedColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    dense: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    contentClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    contentStyle: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    textColor: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    disable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: "blue-900";
+    };
+    rounded: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    size: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    iconSize: {
+        readonly type: StringConstructor;
+        readonly default: "lg";
+    };
+    modelValue: {
+        required: true;
+    };
+    name: {
+        type: StringConstructor;
+        default: null;
+    };
+    label: {
+        type: StringConstructor;
+        default: null;
+    };
+    trueValue: {
+        default: boolean;
+    };
+    falseValue: {
+        default: boolean;
+    };
+    intermediateValue: {
+        default: null;
+    };
+    checkedIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    uncheckedIcon: {
+        type: StringConstructor;
+        default: null;
+    };
+    intermediateIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    checkedColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    uncheckedColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    dense: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {
+    dense: boolean;
+    label: string;
+    name: string;
+    contentClass: string;
+    contentStyle: string;
+    textColor: string;
+    disable: boolean;
+    loading: boolean;
+    color: string;
+    rounded: string;
+    size: string;
+    iconSize: string;
+    trueValue: boolean;
+    falseValue: boolean;
+    intermediateValue: null;
+    checkedIcon: string;
+    uncheckedIcon: string;
+    intermediateIcon: string;
+    checkedColor: string;
+    uncheckedColor: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/CodeBlock.d.vue.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/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;