@archpublicwebsite/rangepicker 1.0.13 → 1.0.18

package/dist/RangepickerTheming.stories.js

@@ -0,0 +1,379 @@
+import { ref, watch } from "vue";
+import RangepickerInput from "./RangepickerInput.vue";
+/**
+ * Stories demonstrating theming and color customization options
+ * for the Rangepicker component.
+ */
+const meta = {
+    title: "Components/Rangepicker/Theming",
+    component: RangepickerInput,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: `
+## Theming & Colors
+
+Customize the appearance of the rangepicker with color props.
+Each instance can have its own color scheme using HEX color values.
+
+### Color Props
+
+| Prop | Description |
+|------|-------------|
+| \`primaryColor\` | Main accent color for selected dates, buttons, and highlights |
+| \`secondaryColor\` | Hover states and range highlighting |
+
+> **TIP**: Use complementary colors for \`primaryColor\` and \`secondaryColor\`
+> to create a cohesive look. The secondary color should typically be a lighter
+> shade of the primary color.
+        `,
+            },
+        },
+    },
+    argTypes: {
+        primaryColor: {
+            control: "color",
+            description: "Primary color for selected dates and highlights (HEX format)",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "undefined (uses default blue)" },
+            },
+        },
+        secondaryColor: {
+            control: "color",
+            description: "Secondary color for hover states (HEX format)",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "undefined (uses default light blue)" },
+            },
+        },
+        variant: {
+            control: "select",
+            options: ["desktop", "mobile"],
+        },
+        options: {
+            control: "object",
+        },
+    },
+    args: {
+        placeholder: "Check in / Check out",
+        id: "dates",
+        name: "dates",
+        variant: "desktop",
+        options: {
+            autoApply: true,
+            minDate: new Date(),
+            format: 'DD MMM YYYY',
+            numberOfColumns: 2,
+            numberOfMonths: 2,
+        }
+    },
+    render: (args) => ({
+        components: { RangepickerInput },
+        setup() {
+            const modelValue = ref(args.modelValue ?? "");
+            watch(() => args.modelValue, (value) => {
+                const nextValue = value ?? "";
+                if (nextValue !== modelValue.value) {
+                    modelValue.value = nextValue;
+                }
+            });
+            return { args, modelValue };
+        },
+        template: `
+      <div style="padding: 2rem; background: #f5f5f5; min-height: 400px;">
+        <RangepickerInput v-bind="args" v-model="modelValue" class="form-control mb-0 shadow-none text-black lg:pl-2 border-0 w-full" />
+      </div>
+    `
+    })
+};
+export default meta;
+/**
+ * Default theme with no custom colors applied.
+ */
+export const DefaultTheme = {
+    args: {},
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Default Theme
+
+No custom colors applied. Uses the component's default color scheme.
+        `,
+            },
+        },
+    },
+};
+/**
+ * Blue theme - professional and trustworthy.
+ */
+export const BlueTheme = {
+    args: {
+        primaryColor: "#3b82f6",
+        secondaryColor: "#60a5fa",
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Blue Theme
+
+A professional blue color scheme.
+
+\`\`\`vue
+<RangepickerInput
+  primaryColor="#3b82f6"
+  secondaryColor="#60a5fa"
+/>
+\`\`\`
+        `,
+            },
+        },
+    },
+};
+/**
+ * Purple theme - creative and modern.
+ */
+export const PurpleTheme = {
+    args: {
+        primaryColor: "#8b5cf6",
+        secondaryColor: "#a78bfa",
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Purple Theme
+
+A creative purple color scheme.
+
+\`\`\`vue
+<RangepickerInput
+  primaryColor="#8b5cf6"
+  secondaryColor="#a78bfa"
+/>
+\`\`\`
+        `,
+            },
+        },
+    },
+};
+/**
+ * Red theme - bold and attention-grabbing.
+ */
+export const RedTheme = {
+    args: {
+        primaryColor: "#ef4444",
+        secondaryColor: "#f87171",
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Red Theme
+
+A bold red color scheme.
+
+\`\`\`vue
+<RangepickerInput
+  primaryColor="#ef4444"
+  secondaryColor="#f87171"
+/>
+\`\`\`
+        `,
+            },
+        },
+    },
+};
+/**
+ * Green theme - natural and calming.
+ */
+export const GreenTheme = {
+    args: {
+        primaryColor: "#10b981",
+        secondaryColor: "#34d399",
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Green Theme
+
+A natural green color scheme.
+
+\`\`\`vue
+<RangepickerInput
+  primaryColor="#10b981"
+  secondaryColor="#34d399"
+/>
+\`\`\`
+        `,
+            },
+        },
+    },
+};
+/**
+ * Orange theme - warm and energetic.
+ */
+export const OrangeTheme = {
+    args: {
+        primaryColor: "#f97316",
+        secondaryColor: "#fb923c",
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Orange Theme
+
+A warm orange color scheme.
+
+\`\`\`vue
+<RangepickerInput
+  primaryColor="#f97316"
+  secondaryColor="#fb923c"
+/>
+\`\`\`
+        `,
+            },
+        },
+    },
+};
+/**
+ * Pink theme - playful and vibrant.
+ */
+export const PinkTheme = {
+    args: {
+        primaryColor: "#ec4899",
+        secondaryColor: "#f472b6",
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Pink Theme
+
+A playful pink color scheme.
+
+\`\`\`vue
+<RangepickerInput
+  primaryColor="#ec4899"
+  secondaryColor="#f472b6"
+/>
+\`\`\`
+        `,
+            },
+        },
+    },
+};
+/**
+ * Teal theme - fresh and modern.
+ */
+export const TealTheme = {
+    args: {
+        primaryColor: "#14b8a6",
+        secondaryColor: "#2dd4bf",
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Teal Theme
+
+A fresh teal color scheme.
+
+\`\`\`vue
+<RangepickerInput
+  primaryColor="#14b8a6"
+  secondaryColor="#2dd4bf"
+/>
+\`\`\`
+        `,
+            },
+        },
+    },
+};
+/**
+ * Indigo theme - elegant and sophisticated.
+ */
+export const IndigoTheme = {
+    args: {
+        primaryColor: "#6366f1",
+        secondaryColor: "#818cf8",
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Indigo Theme
+
+An elegant indigo color scheme.
+
+\`\`\`vue
+<RangepickerInput
+  primaryColor="#6366f1"
+  secondaryColor="#818cf8"
+/>
+\`\`\`
+        `,
+            },
+        },
+    },
+};
+/**
+ * Dark theme - sleek and modern.
+ */
+export const DarkTheme = {
+    args: {
+        primaryColor: "#374151",
+        secondaryColor: "#6b7280",
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Dark/Gray Theme
+
+A sleek dark gray color scheme.
+
+\`\`\`vue
+<RangepickerInput
+  primaryColor="#374151"
+  secondaryColor="#6b7280"
+/>
+\`\`\`
+        `,
+            },
+        },
+    },
+};
+/**
+ * Interactive color picker - try your own colors!
+ */
+export const CustomColors = {
+    args: {
+        primaryColor: "#0ea5e9",
+        secondaryColor: "#38bdf8",
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### Custom Colors
+
+Use the **Controls** panel below to experiment with your own color combinations!
+
+1. Click the color picker for \`primaryColor\`
+2. Choose your main accent color
+3. Click the color picker for \`secondaryColor\`
+4. Choose a complementary lighter shade
+
+> **TIP**: For best results, make the secondary color a lighter version
+> of the primary color (increase lightness by 10-20%).
+        `,
+            },
+        },
+    },
+};

package/dist/rangepicker.js

@@ -313,27 +313,28 @@ const _hoisted_6 = {
   class: "arch-text-xs arch-text-gray-500 arch-mt-1"
 };
 const _hoisted_7 = { class: "rangepicker-body" };
-const _hoisted_8 = { class: "rangepicker-month-header" };
-const _hoisted_9 = ["disabled"];
-const _hoisted_10 = {
+const _hoisted_8 = { class: "rangepicker-month-grid" };
+const _hoisted_9 = { class: "rangepicker-month-header" };
+const _hoisted_10 = ["disabled"];
+const _hoisted_11 = {
   key: 1,
   class: "arch-w-8"
 };
-const _hoisted_11 = { class: "rangepicker-month-title" };
-const _hoisted_12 = ["disabled"];
-const _hoisted_13 = {
+const _hoisted_12 = { class: "rangepicker-month-title" };
+const _hoisted_13 = ["disabled"];
+const _hoisted_14 = {
   key: 3,
   class: "arch-w-8"
 };
-const _hoisted_14 = { class: "rangepicker-weekdays" };
-const _hoisted_15 = { class: "rangepicker-grid" };
-const _hoisted_16 = ["disabled", "aria-label", "onClick", "onMouseenter"];
-const _hoisted_17 = {
+const _hoisted_15 = { class: "rangepicker-weekdays" };
+const _hoisted_16 = { class: "rangepicker-grid" };
+const _hoisted_17 = ["disabled", "aria-label", "onClick", "onMouseenter"];
+const _hoisted_18 = {
   key: 0,
   class: "arch-mt-4 arch-flex arch-items-center arch-justify-end arch-gap-2 arch-border-t arch-border-gray-200 arch-pt-4"
 };
-const _hoisted_18 = ["disabled"];
-const _hoisted_19 = { class: "arch-flex arch-items-center arch-gap-1" };
+const _hoisted_19 = ["disabled"];
+const _hoisted_20 = { class: "arch-flex arch-items-center arch-gap-1" };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "Rangepicker",
   props: {
@@ -368,7 +369,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const numberOfMonths = computed(
       () => isMobile.value ? 1 : props.valueOfMonths
     );
-    const numberOfColumns = computed(
+    computed(
       () => isMobile.value ? 1 : props.valueOfColumns
     );
     const calendarRef = ref(null);
@@ -638,17 +639,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   ])
                 ]),
                 createElementVNode("div", _hoisted_7, [
-                  createElementVNode("div", {
-                    class: normalizeClass(["rangepicker-month-grid", [
-                      __props.variant === "mobile" ? "arch-grid-cols-1" : `lg:arch-grid-cols-${numberOfColumns.value}`
-                    ]])
-                  }, [
+                  createElementVNode("div", _hoisted_8, [
                     (openBlock(true), createElementBlock(Fragment, null, renderList(calendarMonths.value, (monthData, index) => {
                       return openBlock(), createElementBlock("div", {
                         key: monthData.month.format("YYYY-MM"),
                         class: "rangepicker-month"
                       }, [
-                        createElementVNode("div", _hoisted_8, [
+                        createElementVNode("div", _hoisted_9, [
                           __props.variant === "mobile" || index === 0 ? (openBlock(), createElementBlock("button", {
                             key: 0,
                             class: "rangepicker-nav-button",
@@ -668,8 +665,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                                 "clip-rule": "evenodd"
                               })
                             ], -1)
-                          ])], 8, _hoisted_9)) : (openBlock(), createElementBlock("div", _hoisted_10)),
-                          createElementVNode("span", _hoisted_11, toDisplayString(monthData.month.format("MMMM YYYY")), 1),
+                          ])], 8, _hoisted_10)) : (openBlock(), createElementBlock("div", _hoisted_11)),
+                          createElementVNode("span", _hoisted_12, toDisplayString(monthData.month.format("MMMM YYYY")), 1),
                           __props.variant === "mobile" || index === calendarMonths.value.length - 1 ? (openBlock(), createElementBlock("button", {
                             key: 2,
                             class: "rangepicker-nav-button",
@@ -689,9 +686,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                                 "clip-rule": "evenodd"
                               })
                             ], -1)
-                          ])], 8, _hoisted_12)) : (openBlock(), createElementBlock("div", _hoisted_13))
+                          ])], 8, _hoisted_13)) : (openBlock(), createElementBlock("div", _hoisted_14))
                         ]),
-                        createElementVNode("div", _hoisted_14, [
+                        createElementVNode("div", _hoisted_15, [
                           (openBlock(true), createElementBlock(Fragment, null, renderList(weekdays.value, (weekday) => {
                             return openBlock(), createElementBlock("div", {
                               key: weekday,
@@ -699,7 +696,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                             }, toDisplayString(weekday), 1);
                           }), 128))
                         ]),
-                        createElementVNode("div", _hoisted_15, [
+                        createElementVNode("div", _hoisted_16, [
                           (openBlock(true), createElementBlock(Fragment, null, renderList(monthData.days, (day) => {
                             return openBlock(), createElementBlock("button", {
                               key: day.date.unix(),
@@ -711,13 +708,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                               onMouseleave: handleDayLeave
                             }, [
                               createElementVNode("span", null, toDisplayString(day.date.date()), 1)
-                            ], 42, _hoisted_16);
+                            ], 42, _hoisted_17);
                           }), 128))
                         ])
                       ]);
                     }), 128))
-                  ], 2),
-                  !__props.autoApply ? (openBlock(), createElementBlock("div", _hoisted_17, [
+                  ]),
+                  !__props.autoApply ? (openBlock(), createElementBlock("div", _hoisted_18, [
                     createElementVNode("button", {
                       class: "arch-px-4 arch-py-2 arch-text-sm arch-font-medium arch-text-gray-700 hover:arch-bg-gray-100 arch-rounded-lg arch-transition-colors",
                       onClick: cancel
@@ -726,7 +723,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                       class: "arch-px-4 arch-py-2 arch-text-sm arch-font-medium arch-text-white arch-bg-blue-600 hover:arch-bg-blue-700 arch-rounded-lg arch-transition-colors disabled:arch-opacity-50 disabled:arch-cursor-not-allowed",
                       disabled: !localStartDate.value || !localEndDate.value,
                       onClick: apply
-                    }, " Apply ", 8, _hoisted_18)
+                    }, " Apply ", 8, _hoisted_19)
                   ])) : createCommentVNode("", true)
                 ]),
                 showTooltipComputed.value ? (openBlock(), createElementBlock("div", {
@@ -734,7 +731,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   class: "rangepicker-tooltip",
                   style: normalizeStyle(tooltipStyle.value)
                 }, [
-                  createElementVNode("div", _hoisted_19, toDisplayString(tooltipText.value), 1)
+                  createElementVNode("div", _hoisted_20, toDisplayString(tooltipText.value), 1)
                 ], 4)) : createCommentVNode("", true)
               ], 6)
             ])) : createCommentVNode("", true)
@@ -752,7 +749,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const Rangepicker = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-28d37b0e"]]);
+const Rangepicker = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-d26b2742"]]);
 const _hoisted_1 = ["id", "value", "placeholder", "readonly", "name"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "RangepickerInput",
@@ -767,7 +764,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     options: {},
     variant: { default: "desktop" },
     primaryColor: {},
-    secondaryColor: {}
+    secondaryColor: {},
+    fontFamily: {}
   },
   emits: ["update:modelValue", "focusin"],
   setup(__props, { emit: __emit }) {
@@ -845,6 +843,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           styles["--color-secondary"] = rgb;
         }
       }
+      styles["--font-family"] = props.fontFamily || "inherit";
       return styles;
     });
     return (_ctx, _cache) => {
@@ -893,7 +892,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const RangepickerInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4e3d84fa"]]);
+const RangepickerInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-425c6c38"]]);
 function useRangepicker(triggerRef, options = {}) {
   const isOpen = ref(false);
   const dateRange = ref({ startDate: "", endDate: "" });