vueless 0.0.813 → 0.0.815

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.813",
+  "version": "0.0.815",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.form-calendar/storybook/stories.ts

@@ -7,6 +7,8 @@ import {
 } from "../../utils/storybook.ts";
 
 import UCalendar from "../../ui.form-calendar/UCalendar.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UDatePicker from "../../ui.form-date-picker/UDatePicker.vue";
 
 import { COMPONENT_NAME } from "../constants.ts";
 
@@ -14,14 +16,16 @@ import type { DateValue, UCalendarProps } from "../types.ts";
 
 interface UCalendarArgs extends UCalendarProps<DateValue> {
   slotTemplate?: string;
-  enum: "size";
+  enum: "view";
 }
 
 export default {
   id: "3165",
   title: "Form Inputs & Controls / Calendar",
   component: UCalendar,
-  args: {},
+  args: {
+    modelValue: null,
+  },
   argTypes: {
     ...getArgTypes(COMPONENT_NAME),
   },
@@ -53,9 +57,52 @@ const DefaultTemplate: StoryFn<UCalendarArgs> = (args: UCalendarArgs) => ({
     `,
 });
 
+const EnumVariantTemplate: StoryFn<UCalendarArgs> = (args: UCalendarArgs, { argTypes }) => ({
+  components: { UCalendar, URow },
+  setup() {
+    return {
+      args,
+      options: argTypes[args.enum]?.options,
+    };
+  },
+  template: `
+      <URow>
+        <UCalendar
+          v-for="(option, index) in options"
+          :key="index"
+          v-bind="args"
+          v-model="args.modelValue"
+          :[args.enum]="option"
+        />
+      </URow>
+  `,
+});
+
+const UserDateFormatTemplate: StoryFn<UCalendarArgs> = (args: UCalendarArgs) => ({
+  components: { UDatePicker },
+  setup() {
+    const slots = getSlotNames(COMPONENT_NAME);
+
+    return { args, slots };
+  },
+  template: `
+      <UDatePicker v-bind="args" v-model="args.modelValue" />
+    `,
+});
+
 export const Default = DefaultTemplate.bind({});
 Default.args = { modelValue: null };
 
+export const View = EnumVariantTemplate.bind({});
+View.args = { enum: "view" };
+View.parameters = {
+  docs: {
+    description: {
+      story: "Calendar view variant (`day`, `month`, `year`).",
+    },
+  },
+};
+
 export const Range = DefaultTemplate.bind({});
 Range.args = {
   range: true,
@@ -68,12 +115,56 @@ Range.args = {
 export const Timepicker = DefaultTemplate.bind({});
 Timepicker.args = { modelValue: new Date(2024, 2, 14, 12, 24, 14), timepicker: true };
 
+export const DateFormat = DefaultTemplate.bind({});
+DateFormat.args = { dateFormat: "Y-m-d" };
+DateFormat.parameters = {
+  docs: {
+    description: {
+      story: "Date string format.",
+    },
+  },
+};
+
+export const DateTimeFormat = DefaultTemplate.bind({});
+DateTimeFormat.args = { timepicker: true, dateTimeFormat: "Y-m-d H:i:S" };
+DateTimeFormat.parameters = {
+  docs: {
+    description: {
+      story: "Same as date format, but used when timepicker is enabled.",
+    },
+  },
+};
+
+export const UserDateFormat = UserDateFormatTemplate.bind({});
+UserDateFormat.args = { userDateFormat: "d/m/Y" };
+UserDateFormat.parameters = {
+  docs: {
+    description: {
+      story: "User-friendly date format (it will be shown in UI).",
+    },
+  },
+};
+
+export const UserDateTimeFormat = UserDateFormatTemplate.bind({});
+UserDateTimeFormat.args = { timepicker: true, userDateTimeFormat: "d/m/Y H:i:S" };
+UserDateTimeFormat.parameters = {
+  docs: {
+    description: {
+      story: "Same as user format, but used when timepicker is enabled.",
+    },
+  },
+};
+
 export const MinMax = DefaultTemplate.bind({});
 MinMax.args = {
   minDate: new Date(2022, 2, 22),
   maxDate: new Date(2022, 2, 26),
   modelValue: new Date(2022, 2, 24),
 };
-
-export const DateFormat = DefaultTemplate.bind({});
-DateFormat.args = { dateFormat: "d.m.Y", userDateFormat: "d.m.Y", modelValue: "28.06.2024" };
+MinMax.parameters = {
+  docs: {
+    description: {
+      story: "Use `minDate` and `maxDate` props to set the minimum and maximum date.",
+    },
+  },
+};

package/ui.form-date-picker/storybook/stories.ts

@@ -9,6 +9,8 @@ import {
 import UDatePicker from "../../ui.form-date-picker/UDatePicker.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import URow from "../../ui.container-row/URow.vue";
+import UCol from "../../ui.container-col/UCol.vue";
+import UButton from "../../ui.button/UButton.vue";
 
 import { COMPONENT_NAME } from "../constants.ts";
 
@@ -20,7 +22,7 @@ interface DefaultUDatePickerArgs extends Props<unknown> {
 
 interface EnumUDatePickerArgs extends Props<unknown> {
   slotTemplate?: string;
-  enum: "size";
+  enum: "size" | "labelAlign";
 }
 
 export default {
@@ -28,7 +30,7 @@ export default {
   title: "Form Inputs & Controls / Date Picker",
   component: UDatePicker,
   args: {
-    label: "Label",
+    label: "Select a date",
     modelValue: null,
   },
   argTypes: {
@@ -66,7 +68,7 @@ const EnumVariantTemplate: StoryFn<EnumUDatePickerArgs> = (
   args: EnumUDatePickerArgs,
   { argTypes },
 ) => ({
-  components: { UDatePicker, URow },
+  components: { UDatePicker, UCol },
   setup() {
     return {
       args,
@@ -74,16 +76,16 @@ const EnumVariantTemplate: StoryFn<EnumUDatePickerArgs> = (
     };
   },
   template: `
-    <URow>
+    <UCol>
       <UDatePicker
         v-for="(option, index) in options"
         open-direction-y="bottom"
         :key="index"
         v-bind="args"
         :[args.enum]="option"
-        :label="option"
+        :placeholder="option"
       />
-    </URow>
+    </UCol>
   `,
 });
 
@@ -135,26 +137,35 @@ const OpenDirectionTemplate: StoryFn<DefaultUDatePickerArgs> = (args: DefaultUDa
 export const Default = DefaultTemplate.bind({});
 Default.args = { modelValue: new Date() };
 
-export const Sizes = EnumVariantTemplate.bind({});
-Sizes.args = { enum: "size", label: "" };
-
-export const OpenDirection = OpenDirectionTemplate.bind({});
-OpenDirection.args = {};
+export const Placeholder = DefaultTemplate.bind({});
+Placeholder.args = { placeholder: "MM/DD/YYYY" };
 
 export const Description = DefaultTemplate.bind({});
-Description.args = { description: "some description" };
+Description.args = { description: "Please choose a date from the calendar." };
+
+export const Error = DefaultTemplate.bind({});
+Error.args = { error: "Please select a valid date." };
 
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
 
-export const Error = DefaultTemplate.bind({});
-Error.args = { error: "some error" };
+export const LabelPlacement = EnumVariantTemplate.bind({});
+LabelPlacement.args = { enum: "labelAlign" };
 
-export const Placeholder = DefaultTemplate.bind({});
-Placeholder.args = { placeholder: "some placeholder" };
+export const Size = EnumVariantTemplate.bind({});
+Size.args = { enum: "size" };
 
-export const DateFormat = DefaultTemplate.bind({});
-DateFormat.args = { dateFormat: "d.m.Y", userDateFormat: "d.m.Y", modelValue: "28.06.2024" };
+export const OpenDirection = OpenDirectionTemplate.bind({});
+OpenDirection.args = {};
+OpenDirection.parameters = {
+  docs: {
+    description: {
+      story:
+        // eslint-disable-next-line vue/max-len
+        "Control the direction in which the datepicker opens along the x- and y-axes using the `openDirectionX` and `openDirectionY` props.",
+    },
+  },
+};
 
 export const Timepicker = DefaultTemplate.bind({});
 Timepicker.args = {
@@ -162,19 +173,110 @@ Timepicker.args = {
   modelValue: new Date(2024, 2, 14, 12, 24, 14),
 };
 
+export const DateFormat = DefaultTemplate.bind({});
+DateFormat.args = { dateFormat: "Y-m-d" };
+DateFormat.parameters = {
+  docs: {
+    description: {
+      story: "Date string format.",
+    },
+  },
+};
+
+export const DateTimeFormat = DefaultTemplate.bind({});
+DateTimeFormat.args = { timepicker: true, dateTimeFormat: "Y-m-d H:i:S" };
+DateTimeFormat.parameters = {
+  docs: {
+    description: {
+      story: "Same as date format, but used when timepicker is enabled.",
+    },
+  },
+};
+
+export const UserDateFormat = DefaultTemplate.bind({});
+UserDateFormat.args = { userDateFormat: "d/m/Y" };
+UserDateFormat.parameters = {
+  docs: {
+    description: {
+      story: "User-friendly date format (it will be shown in UI).",
+    },
+  },
+};
+
+export const UserDateTimeFormat = DefaultTemplate.bind({});
+UserDateTimeFormat.args = { timepicker: true, userDateTimeFormat: "d/m/Y H:i:S" };
+UserDateTimeFormat.parameters = {
+  docs: {
+    description: {
+      story: "Same as user format, but used when timepicker is enabled.",
+    },
+  },
+};
+
 export const MinMax = DefaultTemplate.bind({});
 MinMax.args = {
   minDate: new Date(2022, 2, 22),
   maxDate: new Date(2022, 2, 26),
   modelValue: new Date(2022, 2, 24),
 };
-
-export const LeftIcon = DefaultTemplate.bind({});
-LeftIcon.args = {
-  leftIcon: "star",
+MinMax.parameters = {
+  docs: {
+    description: {
+      story: "Use `minDate` and `maxDate` props to set the minimum and maximum date.",
+    },
+  },
 };
 
-export const RightIcon = DefaultTemplate.bind({});
-RightIcon.args = {
-  rightIcon: "star",
-};
+export const IconProps: StoryFn<DefaultUDatePickerArgs> = (args) => ({
+  components: { UDatePicker, URow },
+  setup() {
+    return { args };
+  },
+  template: `
+    <URow>
+      <UDatePicker
+        v-bind="args"
+        v-model="args.modelValue"
+        left-icon="update"
+        class="w-full"
+      />
+      <UDatePicker
+        v-bind="args"
+        v-model="args.modelValue"
+        right-icon="edit_calendar"
+        class="w-full"
+      />
+    </URow>
+  `,
+});
+
+export const Slots: StoryFn<DefaultUDatePickerArgs> = (args) => ({
+  components: { UDatePicker, URow, UButton },
+  setup() {
+    return { args };
+  },
+  template: `
+    <URow justify="stretch">
+      <UDatePicker
+        v-bind="args"
+        v-model="args.modelValue"
+        class="w-full"
+        :config="{ datepickerInput: { leftSlot: 'pl-0' } }"
+      >
+        <template #left>
+          <UButton label="Export" size="xs" class="h-full rounded-r-none" />
+        </template>
+      </UDatePicker>
+      <UDatePicker
+        v-bind="args"
+        v-model="args.modelValue"
+        class="w-full"
+        :config="{ datepickerInput: { rightSlot: 'pr-0' } }"
+      >
+        <template #right>
+          <UButton label="Schedule" size="xs" class="h-full rounded-l-none" />
+        </template>
+      </UDatePicker>
+    </URow>
+  `,
+});

package/ui.form-date-picker/types.ts

@@ -36,6 +36,11 @@ export interface Props<TModelValue> {
    */
   error?: string;
 
+  /**
+   * Make datepicker disabled.
+   */
+  disabled?: boolean;
+
   /**
    * Datepicker size.
    */
@@ -98,11 +103,6 @@ export interface Props<TModelValue> {
    */
   rightIcon?: string;
 
-  /**
-   * Make datepicker disabled.
-   */
-  disabled?: boolean;
-
   /**
    * Unique element id.
    */

package/ui.form-date-picker-range/UDatePickerRange.vue

@@ -157,6 +157,7 @@ const rangePeriodMenuAttrs = computed(() => ({
   rangeSwitchButtonAttrs,
   rangeSwitchTitleAttrs,
   rangeSwitchWrapperAttrs,
+  customRangeButtonAttrs,
   customRangeDescriptionAttrs,
 }));
 
@@ -538,6 +539,7 @@ const mutatedProps = computed(() => ({
   month: isPeriod.value.month,
   quarter: isPeriod.value.quarter,
   year: isPeriod.value.year,
+  customRangeButtonDescription: Boolean(props.customRangeButton.description),
 }));
 
 const {
@@ -566,6 +568,7 @@ const {
   rangeSwitchButtonAttrs,
   rangeSwitchTitleAttrs,
   rangeSwitchWrapperAttrs,
+  customRangeButtonAttrs,
   customRangeDescriptionAttrs,
 } = useUI<Config>(defaultConfig, mutatedProps);
 

package/ui.form-date-picker-range/UDatePickerRangePeriodMenu.vue

@@ -169,7 +169,7 @@ function getDatePeriodState(date: DatePeriodRange) {
       size="xs"
       color="grayscale"
       variant="thirdary"
-      v-bind="attrs.periodButtonAttrs.value"
+      v-bind="attrs.customRangeButtonAttrs.value"
       @click="onClickCustomRangeButton"
     >
       {{ customRangeButton.label }}
@@ -187,7 +187,7 @@ function getDatePeriodState(date: DatePeriodRange) {
       size="xs"
       color="grayscale"
       variant="thirdary"
-      v-bind="attrs.periodButtonActiveAttrs.value"
+      v-bind="attrs.customRangeButtonAttrs.value"
       @click="onClickCustomRangeButton"
     >
       {{ customRangeButton.label }}

package/ui.form-date-picker-range/config.ts

@@ -78,6 +78,14 @@ export default /*tw*/ {
   periodDateSelected: "{>periodDate}",
   periodDateCurrent: "{>periodDate} border-2 border-brand-600",
   periodDateCurrentSelected: "{>periodDate} {>periodDateSelected} {>periodDateCurrent}",
+  customRangeButton: {
+    base: "{>periodButton}",
+    variants: {
+      customRangeButtonDescription: {
+        true: "flex-col",
+      },
+    },
+  },
   customRangeDescription: "",
   rangeInputWrapper: "flex mt-4 -space-x-px group/range-input-wrapper",
   rangeInput: {

package/ui.form-date-picker-range/storybook/stories.ts

@@ -8,6 +8,7 @@ import {
 
 import UDatePickerRange from "../UDatePickerRange.vue";
 import URow from "../../ui.container-row/URow.vue";
+import UCol from "../../ui.container-col/UCol.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import UButton from "../../ui.button/UButton.vue";
 
@@ -23,7 +24,7 @@ interface DefaultUDatePickerRangeArgs extends UDatePickerRangeProps<unknown> {
 
 interface EnumUDatePickerRangeArgs extends UDatePickerRangeProps<unknown> {
   slotTemplate?: string;
-  enum: "size" | "variant";
+  enum: "size" | "variant" | "labelAlign";
 }
 
 export default {
@@ -31,7 +32,7 @@ export default {
   title: "Form Inputs & Controls / Date Picker Range",
   component: UDatePickerRange,
   args: {
-    label: "Datepicker range",
+    label: "Select a date",
     modelValue: {
       from: new Date(2022, 1, 14),
       to: new Date(2022, 2, 20),
@@ -74,7 +75,7 @@ const EnumVariantTemplate: StoryFn<EnumUDatePickerRangeArgs> = (
   args: EnumUDatePickerRangeArgs,
   { argTypes },
 ) => ({
-  components: { UDatePickerRange, URow },
+  components: { UDatePickerRange, UCol },
   setup() {
     return {
       args,
@@ -82,7 +83,7 @@ const EnumVariantTemplate: StoryFn<EnumUDatePickerRangeArgs> = (
     };
   },
   template: `
-    <URow>
+    <UCol>
       <UDatePickerRange
         v-for="(option, index) in options"
         :key="index"
@@ -90,8 +91,10 @@ const EnumVariantTemplate: StoryFn<EnumUDatePickerRangeArgs> = (
         v-bind="args"
         v-model="args.modelValue"
         :[args.enum]="option"
+        :placeholder="option"
+        class="w-full"
       />
-    </URow>
+    </UCol>
   `,
 });
 
@@ -143,23 +146,72 @@ const OpenDirectionTemplate: StoryFn<DefaultUDatePickerRangeArgs> = (
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const Placeholder = DefaultTemplate.bind({});
+Placeholder.args = {
+  variant: "input",
+  placeholder: "MM/DD/YYYY",
+  modelValue: { from: null, to: null },
+};
+
+export const Description = DefaultTemplate.bind({});
+Description.args = {
+  variant: "input",
+  description: "Please choose a date range from the calendar.",
+};
+
+export const Error = DefaultTemplate.bind({});
+Error.args = { variant: "input", error: "Please select a valid date." };
+
+export const Disabled = DefaultTemplate.bind({});
+Disabled.args = { disabled: true };
+
 export const Variants = EnumVariantTemplate.bind({});
 Variants.args = { enum: "variant" };
 
-export const OpenDirection = OpenDirectionTemplate.bind({});
-OpenDirection.args = {};
+export const LabelPlacement = EnumVariantTemplate.bind({});
+LabelPlacement.args = {
+  variant: "input",
+  enum: "labelAlign",
+  modelValue: { from: null, to: null },
+};
 
-export const Disabled = EnumVariantTemplate.bind({});
-Disabled.args = { enum: "variant", disabled: true };
+export const Size = EnumVariantTemplate.bind({});
+Size.args = {
+  variant: "input",
+  enum: "size",
+  modelValue: { from: null, to: null },
+};
 
-export const Label = DefaultTemplate.bind({});
-Label.args = { variant: "input", label: "some label" };
+export const OpenDirection = OpenDirectionTemplate.bind({});
+OpenDirection.args = { variant: "input" };
 
-export const Description = DefaultTemplate.bind({});
-Description.args = { variant: "input", description: "some description" };
+export const DateFormat = DefaultTemplate.bind({});
+DateFormat.args = {
+  modelValue: { from: null, to: null },
+  variant: "input",
+  dateFormat: "Y-m-d",
+};
+DateFormat.parameters = {
+  docs: {
+    description: {
+      story: "Date string format.",
+    },
+  },
+};
 
-export const Error = DefaultTemplate.bind({});
-Error.args = { variant: "input", error: "some error" };
+export const UserDateFormat = DefaultTemplate.bind({});
+UserDateFormat.args = {
+  modelValue: { from: null, to: null },
+  variant: "input",
+  userDateFormat: "d/m/Y",
+};
+UserDateFormat.parameters = {
+  docs: {
+    description: {
+      story: "User-friendly date format (it will be shown in UI).",
+    },
+  },
+};
 
 export const MinMax = DefaultTemplate.bind({});
 MinMax.args = {
@@ -167,12 +219,12 @@ MinMax.args = {
   maxDate: new Date(2022, 2, 26),
   modelValue: { from: new Date(2022, 2, 24), to: new Date(2022, 2, 25) },
 };
-
-export const DateFormat = DefaultTemplate.bind({});
-DateFormat.args = {
-  dateFormat: "d.m.Y",
-  userDateFormat: "d.m.Y",
-  modelValue: { from: "28.06.2024", to: "30.06.2024" },
+MinMax.parameters = {
+  docs: {
+    description: {
+      story: "Use `minDate` and `maxDate` props to set the minimum and maximum date.",
+    },
+  },
 };
 
 export const CustomRangeButton = DefaultTemplate.bind({});
@@ -183,33 +235,65 @@ CustomRangeButton.args = {
       to: addDays(new Date(), 2),
     },
     label: "Next 2 days",
-    description: "Some description",
+    description: "Select next couple days",
   },
   modelValue: { from: null, to: null },
 };
 
-export const LeftIcon = DefaultTemplate.bind({});
-LeftIcon.args = { leftIcon: "star", variant: "input" };
-
-export const RightIcon = DefaultTemplate.bind({});
-RightIcon.args = { rightIcon: "star", variant: "input" };
-
-export const LeftSlot = DefaultTemplate.bind({});
-LeftSlot.args = {
-  variant: "input",
-  slotTemplate: `
-    <template #left>
-      <UButton variant="thirdary" filled square label="Filter" class="rounded-r-none h-full" />
-    </template>
+export const IconProps: StoryFn<DefaultUDatePickerRangeArgs> = (args) => ({
+  components: { UDatePickerRange, URow },
+  setup() {
+    return { args };
+  },
+  template: `
+    <URow>
+      <UDatePickerRange
+        v-bind="args"
+        v-model="args.modelValue"
+        variant="input"
+        left-icon="update"
+        class="w-full"
+      />
+      <UDatePickerRange
+        v-bind="args"
+        v-model="args.modelValue"
+        variant="input"
+        right-icon="edit_calendar"
+        class="w-full"
+      />
+    </URow>
   `,
-};
+});
 
-export const RightSlot = DefaultTemplate.bind({});
-RightSlot.args = {
-  variant: "input",
-  slotTemplate: `
-    <template #right>
-      <UButton variant="thirdary" filled square label="Filter" class="rounded-l-none" />
-    </template>
+export const Slots: StoryFn<DefaultUDatePickerRangeArgs> = (args) => ({
+  components: { UDatePickerRange, URow, UButton },
+  setup() {
+    return { args };
+  },
+  template: `
+    <URow justify="stretch">
+      <UDatePickerRange
+        v-bind="args"
+        v-model="args.modelValue"
+        variant="input"
+        class="w-full"
+        :config="{ datepickerInput: { leftSlot: 'pl-0' } }"
+      >
+        <template #left>
+          <UButton label="Export" size="xs" class="h-full rounded-r-none" />
+        </template>
+      </UDatePickerRange>
+      <UDatePickerRange
+        v-bind="args"
+        v-model="args.modelValue"
+        variant="input"
+        class="w-full"
+        :config="{ datepickerInput: { rightSlot: 'pr-0' } }"
+      >
+        <template #right>
+          <UButton label="Schedule" size="xs" class="h-full rounded-l-none" />
+        </template>
+      </UDatePickerRange>
+    </URow>
   `,
-};
+});