windly-ui 1.0.4 → 1.0.6

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "windly-ui",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -13,7 +13,7 @@ const module$1 = defineNuxtModule({
       pages.push({
         name: "windly-ui-docs",
         path: "/_windly-ui",
-        file: resolver.resolve("./docs/index.vue")
+        file: resolver.resolve("./runtime/docs/index.vue")
       });
     });
     nuxt.hook("tailwindcss:config", (config) => {

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

@@ -1,5 +1,6 @@
 type Separator = "none" | "horizontal" | "vertical" | "cell";
 type Rounded = "none" | "sm" | "md" | "lg" | "xl";
+type Align = "left" | "center" | "right";
 type __VLS_Props = {
     flat?: boolean;
     bordered?: boolean;
@@ -8,6 +9,7 @@ type __VLS_Props = {
     hover?: boolean;
     rounded?: Rounded;
     separator?: Separator;
+    align?: Align;
     borderColor?: string;
     bgColor?: string;
 };
@@ -25,6 +27,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     rounded: Rounded;
     borderColor: string;
     separator: Separator;
+    align: Align;
     flat: boolean;
     bordered: boolean;
     striped: boolean;

package/dist/runtime/components/Table.vue

@@ -8,6 +8,7 @@ const props = defineProps({
   hover: { type: Boolean, required: false, default: true },
   rounded: { type: String, required: false, default: "md" },
   separator: { type: String, required: false, default: "horizontal" },
+  align: { type: String, required: false, default: "left" },
   borderColor: { type: String, required: false, default: "border-gray-200 dark:border-gray-700" },
   bgColor: { type: String, required: false, default: "bg-white dark:bg-gray-900" }
 });
@@ -21,26 +22,51 @@ const roundedClass = computed(() => {
   };
   return map[props.rounded];
 });
+const alignmentClass = computed(() => {
+  switch (props.align) {
+    case "center":
+      return "[&_:where(th)]:text-center [&_:where(td)]:text-center";
+    case "right":
+      return "[&_:where(th)]:text-right [&_:where(td)]:text-right";
+    default:
+      return "[&_:where(th)]:text-left [&_:where(td)]:text-left";
+  }
+});
+const isHex = (val) => val.startsWith("#");
+const wrapperStyle = computed(() => {
+  const style = {};
+  if (isHex(props.bgColor)) {
+    style.backgroundColor = props.bgColor;
+  }
+  if (props.bordered && isHex(props.borderColor)) {
+    style.borderColor = props.borderColor;
+  }
+  return style;
+});
 const wrapperClass = computed(() => [
   "w-full overflow-x-auto",
   roundedClass.value,
-  props.bordered ? `border ${props.borderColor}` : "",
+  props.bordered ? "border" : "",
+  props.bordered && !isHex(props.borderColor) ? props.borderColor : "",
   props.flat ? "shadow-none" : "shadow-sm",
-  props.bgColor
+  !isHex(props.bgColor) ? props.bgColor : ""
 ]);
+const separatorBorderClass = computed(
+  () => !isHex(props.borderColor) ? props.borderColor : ""
+);
 const separatorClass = computed(() => {
   switch (props.separator) {
     case "vertical":
       return [
         "[&_th]:border-r",
         "[&_td]:border-r",
-        props.borderColor
+        separatorBorderClass.value
       ];
     case "cell":
       return [
         "[&_th]:border",
         "[&_td]:border",
-        props.borderColor
+        separatorBorderClass.value
       ];
     case "none":
       return [];
@@ -48,21 +74,42 @@ const separatorClass = computed(() => {
     default:
       return [
         "[&_tr]:border-b",
-        props.borderColor
+        separatorBorderClass.value
       ];
   }
 });
+const spacingClass = computed(
+  () => props.dense ? [
+    "[&_:where(th)]:px-3",
+    "[&_:where(th)]:py-2",
+    "[&_:where(td)]:px-3",
+    "[&_:where(td)]:py-2"
+  ] : [
+    "[&_:where(th)]:px-4",
+    "[&_:where(th)]:py-3",
+    "[&_:where(td)]:px-4",
+    "[&_:where(td)]:py-3"
+  ]
+);
 const tableClass = computed(() => [
-  "w-full border-collapse",
+  "w-full border-collapse text-sm",
+  alignmentClass.value,
   separatorClass.value
 ]);
 const headerClass = computed(() => [
-  "bg-gray-50 dark:bg-gray-800"
+  "bg-gray-50 dark:bg-gray-800",
+  "text-gray-700 dark:text-gray-200",
+  "[&_:where(th)]:font-semibold",
+  "[&_:where(th)]:whitespace-nowrap",
+  spacingClass.value
 ]);
 const bodyClass = computed(() => [
-  props.striped ? "[&_tr:nth-child(even)]:bg-gray-50 dark:[&_tr:nth-child(even)]:bg-gray-800/40" : "",
-  props.hover ? "[&_tr:hover]:bg-gray-100 dark:[&_tr:hover]:bg-gray-700" : "",
-  props.dense ? "[&_td]:py-2 [&_th]:py-2" : "[&_td]:py-3 [&_th]:py-3"
+  "text-gray-900 dark:text-gray-100",
+  props.striped ? "[&_:where(tr:nth-child(even))]:bg-gray-50 dark:[&_:where(tr:nth-child(even))]:bg-gray-800/40" : "",
+  props.hover ? "[&_:where(tr:hover)]:bg-gray-100 dark:[&_:where(tr:hover)]:bg-gray-700/60" : "",
+  spacingClass.value,
+  "[&_:where(th)]:align-middle",
+  "[&_:where(td)]:align-middle"
 ]);
 const footerClass = computed(() => [
   "bg-gray-50 dark:bg-gray-900"
@@ -70,21 +117,15 @@ const footerClass = computed(() => [
 </script>
 
 <template>
-  <div :class="wrapperClass">
+  <div :class="wrapperClass" :style="wrapperStyle">
     <table :class="tableClass">
-      <thead
-        v-if="$slots.header"
-        :class="headerClass"
-      >
+      <thead v-if="$slots.header" :class="headerClass">
         <slot name="header" />
       </thead>
       <tbody :class="bodyClass">
         <slot />
       </tbody>
-      <tfoot
-        v-if="$slots.footer"
-        :class="footerClass"
-      >
+      <tfoot v-if="$slots.footer" :class="footerClass">
         <slot name="footer" />
       </tfoot>
     </table>

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

@@ -1,5 +1,6 @@
 type Separator = "none" | "horizontal" | "vertical" | "cell";
 type Rounded = "none" | "sm" | "md" | "lg" | "xl";
+type Align = "left" | "center" | "right";
 type __VLS_Props = {
     flat?: boolean;
     bordered?: boolean;
@@ -8,6 +9,7 @@ type __VLS_Props = {
     hover?: boolean;
     rounded?: Rounded;
     separator?: Separator;
+    align?: Align;
     borderColor?: string;
     bgColor?: string;
 };
@@ -25,6 +27,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     rounded: Rounded;
     borderColor: string;
     separator: Separator;
+    align: Align;
     flat: boolean;
     bordered: boolean;
     striped: boolean;

package/dist/runtime/docs/component.d.vue.ts

@@ -0,0 +1,28 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+    };
+    caption: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+    };
+    caption: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    caption: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {}) => any) | undefined;
+};

package/dist/runtime/docs/component.vue

@@ -0,0 +1,34 @@
+<script setup>
+const props = defineProps({
+  title: {
+    type: String
+  },
+  caption: {
+    type: String,
+    default: ""
+  }
+});
+const sectionId = props.title.split(" ").join("-").toLocaleLowerCase();
+const copySectionLink = async () => {
+  const url = `${window.location.origin}${window.location.pathname}#${sectionId}`;
+  try {
+    await navigator.clipboard.writeText(url);
+    console.log("Link copied:", url);
+  } catch (err) {
+    console.error("Failed to copy link", err);
+  }
+};
+</script>
+
+<template>
+    <div :id="sectionId" class="flex flex-col my-10">
+        <h4 class="text-3xl font-semibold text-gray-700 cursor-pointer" @click="copySectionLink"># {{title}}</h4>
+        <div v-if="caption" class="text-md font-light mt-2 text-gray-800 pl-7">{{caption}}</div>
+        <div class="my-6">
+            <UICodeBlock :title="title">
+                <slot />
+            </UICodeBlock>
+        </div>
+        <hr/>
+    </div>
+</template>

package/dist/runtime/docs/component.vue.d.ts

@@ -0,0 +1,28 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+    };
+    caption: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+    };
+    caption: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    caption: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {}) => any) | undefined;
+};

package/dist/runtime/docs/index.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;