vueless 0.0.4 → 0.0.6

package/src/ui.form-date-picker-range/services/dateRange.service.js

@@ -0,0 +1,116 @@
+import {
+  getWeeksInMonth,
+  getStartOfWeek,
+  getEndOfWeek,
+  gmtToUTC,
+  addWeeks,
+  getUnixTimestampFromDate,
+  getEndOfMonth,
+  getStartOfMonth,
+  getEndOfQuarter,
+  getStartOfQuarter,
+  addQuarters,
+  getEndOfYear,
+  getStartOfYear,
+} from "../../ui.form-calendar/services/date.service";
+
+export function getYearDateList(date) {
+  const NUMBER_ADDING_YEAR = 12;
+
+  const year = date.getFullYear();
+  const month = date.getMonth();
+
+  const years = [];
+
+  for (let i = 0; i < NUMBER_ADDING_YEAR; i++) {
+    const currentYear = year + i;
+
+    years.push({
+      title: currentYear,
+      startRange: getUnixTimestampFromDate(gmtToUTC(getStartOfYear(new Date(currentYear, month)))),
+      endRange: getUnixTimestampFromDate(gmtToUTC(getEndOfYear(new Date(currentYear, month)))),
+    });
+  }
+
+  return years;
+}
+
+export function getQuartersDateList(date, quarterLocales = "") {
+  const QUARTER_NUMBER = 4;
+  const monthIndex = 0;
+  const day = 1;
+  const year = date.getFullYear();
+
+  let quarters = [];
+
+  const firstQuarter = new Date(year, monthIndex, day);
+
+  for (let quarter = 0; quarter < QUARTER_NUMBER; quarter++) {
+    const newQuarter = addQuarters(firstQuarter, quarter);
+    const currentQuarter = quarter + 1;
+
+    quarters.push({
+      title: `${currentQuarter} ${quarterLocales}`,
+      startRange: getUnixTimestampFromDate(gmtToUTC(getStartOfQuarter(newQuarter))),
+      endRange: getUnixTimestampFromDate(gmtToUTC(getEndOfQuarter(newQuarter))),
+    });
+  }
+
+  return quarters;
+}
+
+export function getMonthsDateList(date, monthLocales = []) {
+  const year = date.getFullYear();
+
+  const months = monthLocales.map((item, index) => {
+    return {
+      title: item,
+      startRange: getUnixTimestampFromDate(gmtToUTC(getStartOfMonth(new Date(year, index)))),
+      endRange: getUnixTimestampFromDate(gmtToUTC(getEndOfMonth(new Date(year, index)))),
+    };
+  });
+
+  return months;
+}
+
+export function getWeekDateList(date, monthShortLocales = {}) {
+  const month = date.getMonth();
+  const year = date.getFullYear();
+  const day = 1;
+  const weeksInMonth = getWeeksInMonth(date);
+
+  const weeks = [];
+
+  for (let week = 0; week < weeksInMonth; week++) {
+    const date = addWeeks(new Date(year, month, day), week);
+    const startOfWeekDate = getStartOfWeek(date, { weekStartsOn: 1 });
+    const endOfWeekDate = getEndOfWeek(date, { weekStartsOn: 1 });
+
+    const firstDayOfWeek = startOfWeekDate.getDate();
+    const lastDayOfWeek = endOfWeekDate.getDate();
+
+    const isDayInPreviousMonth = week === 0 && firstDayOfWeek > 1;
+    const isLastWeek = week + day === weeksInMonth;
+
+    let monthFirstDayOfWeek = "";
+    let monthLastDayOfWeek = endOfWeekDate.toLocaleString("en-us", { month: "long" }).toLowerCase();
+
+    if (isDayInPreviousMonth || isLastWeek) {
+      monthFirstDayOfWeek = startOfWeekDate
+        .toLocaleString("en-us", { month: "long" })
+        .toLowerCase();
+    }
+
+    const title = `${firstDayOfWeek} ${
+      monthShortLocales[monthFirstDayOfWeek] || ""
+    } – ${lastDayOfWeek} ${monthShortLocales[monthLastDayOfWeek]}`;
+
+    weeks.push({
+      title,
+      startRange: getUnixTimestampFromDate(gmtToUTC(startOfWeekDate)),
+      endRange: getUnixTimestampFromDate(gmtToUTC(endOfWeekDate)),
+    });
+  }
+
+  return weeks;
+}

package/src/ui.form-input/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/src/ui.form-input/composables/attrs.composable.js

@@ -0,0 +1,66 @@
+import useUI from "../../composable.ui";
+import { cva, cx } from "../../service.ui";
+
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+
+export function useAttrs(props, { inputPasswordClasses }) {
+  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { input, block } = config.value;
+
+  const cvaInput = cva({
+    base: input.base,
+    variants: input.variants,
+    compoundVariants: input.compoundVariants,
+  });
+
+  const cvaBlock = cva({
+    base: block.base,
+    variants: block.variants,
+    compoundVariants: block.compoundVariants,
+  });
+
+  const blockClasses = computed(() =>
+    cvaBlock({
+      error: Boolean(props.error),
+      disabled: props.disabled,
+    }),
+  );
+
+  const inputClasses = computed(() =>
+    cvaInput({
+      size: props.size,
+      type: props.type,
+      labelOutside: props.labelOutside,
+      label: Boolean(props.label),
+      error: Boolean(props.error),
+    }),
+  );
+
+  const wrapperAttrs = getAttrs("wrapper");
+  const inputWrapperAttrs = getAttrs("inputWrapper");
+  const rightSlotAttrs = getAttrs("rightSlot");
+  const leftSlotAttrs = getAttrs("leftSlot");
+  const passwordIconAttrs = getAttrs("passwordIcon");
+  const blockAttrs = getAttrs("block", { classes: blockClasses });
+  const labelAttrs = getAttrs("label", { isComponent: true });
+  const inputAttrsRaw = getAttrs("input", { classes: inputClasses });
+
+  const inputAttrs = computed(() => ({
+    ...inputAttrsRaw.value,
+    class: cx([inputAttrsRaw.value.class, inputPasswordClasses.value]),
+  }));
+
+  return {
+    config,
+    inputAttrs,
+    blockAttrs,
+    wrapperAttrs,
+    labelAttrs,
+    passwordIconAttrs,
+    leftSlotAttrs,
+    inputWrapperAttrs,
+    rightSlotAttrs,
+    hasSlotContent,
+  };
+}

package/src/ui.form-input/configs/default.config.js

@@ -0,0 +1,72 @@
+export default /*tw*/ {
+  wrapper: "relative w-full",
+  inputWrapper: "flex relative w-full",
+  rightSlot: "flex items-center justify-end whitespace-nowrap pr-4 rounded-r-lg rounded-l-none",
+  leftSlot: "flex items-center justify-end whitespace-nowrap pl-4 rounded-l-lg rounded-r-none",
+  passwordIcon: "",
+  passwordVisibleIconName: "visibility",
+  passwordHiddenIconName: "visibility_off",
+  label: "",
+  block: {
+    base: `
+      rounded-lg border border-solid border-gray-300 bg-white !opacity-100 relative flex
+      transition duration-100 ease-in-out
+      hover:border-gray-400 hover:focus-within:border-gray-500
+      focus-within:border-gray-500 focus-within:ring-4 focus-within:ring-gray-600/[.15]
+    `,
+    variants: {
+      disabled: {
+        true: `
+          text-gray-900 border-gray-100 bg-gray-100 opacity-100 cursor-default
+          hover:border-gray-100
+        `,
+      },
+      error: {
+        true: `
+          border-red-300
+          hover:border-red-400 hover:focus-within:border-red-500
+          focus-within:border-red-500 focus-within:ring-red-100
+        `,
+      },
+    },
+  },
+  input: {
+    base: `
+      block w-full pb-2 px-4 font-normal leading-none text-gray-900 placeholder:font-normal placeholder-gray-400
+      transition duration-100 ease-in-out bg-white border-none border-gray-300 rounded-lg shadow-none
+      focus:outline-none focus:ring-0 disabled:opacity-50
+      disabled:cursor-not-allowed disabled:text-gray-900 disabled:border-gray-100
+      read-only:border-gray-300 read-only:ring-0
+    `,
+    variants: {
+      size: {
+        sm: "pt-6 text-sm placeholder:text-sm placeholder:font-normal",
+        md: "pt-7 text-base placeholder:text-base placeholder:font-normal",
+        lg: "pt-8 text-lg placeholder:text-lg placeholder:font-normal",
+      },
+      error: `
+        border-red-300 hover:border-red-400 focus:border-red-500 focus:ring-red-100
+        focus-within:border-red-500 focus-within:ring-red-100
+      `,
+    },
+    // Note: Left slot width may affect horizontal label position.
+    compoundVariants: [
+      { labelOutside: true, size: "sm", class: "py-2" },
+      { labelOutside: true, size: "md", class: "py-2.5" },
+      { labelOutside: true, size: "lg", class: "py-3" },
+      { labelOutside: false, label: false, size: "sm", class: "py-2" },
+      { labelOutside: false, label: false, size: "md", class: "py-2.5" },
+      { labelOutside: false, label: false, size: "lg", class: "py-3" },
+    ],
+  },
+  defaultVariants: {
+    size: "md",
+    type: "text",
+    inputMode: "text",
+    error: false,
+    readonly: false,
+    disabled: false,
+    labelOutside: false,
+    noAutocomplete: false,
+  },
+};

package/src/ui.form-input/constants/index.js

@@ -0,0 +1,5 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const UInput = "UInput";

package/src/ui.form-input/index.stories.js

@@ -0,0 +1,166 @@
+import { getArgTypes, getSlotNames } from "../service.storybook";
+
+import UInput from "../ui.form-input";
+import UIcon from "../ui.image-icon";
+import UGroup from "../ui.container-group";
+import URow from "../ui.container-row";
+
+export default {
+  id: "3010",
+  title: "Form Inputs & Controls / Input",
+  component: UInput,
+  args: {
+    label: "Label",
+  },
+  argTypes: {
+    ...getArgTypes(UInput.name),
+    modelValue: { control: { type: "text" } },
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UInput },
+  setup() {
+    const slots = getSlotNames(UInput.name);
+
+    return { args, slots };
+  },
+  template: `
+    <UInput
+        v-bind="args"
+    >
+      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
+        <template v-if="args[slot]">{{ args[slot] }}</template>
+      </template>
+    </UInput>
+  `,
+});
+
+const SlotTemplate = (args) => ({
+  components: { UInput, UIcon },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UInput v-bind="args"
+    >
+      ${args.slotTemplate}
+    </UInput>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { UInput, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <URow>
+      <UInput
+        v-for="(size, index) in sizes"
+        v-bind="args"
+        :size="size"
+        :key="index"
+      />
+    </URow>
+  `,
+});
+
+const ValidationRuleTemplate = (args, { argTypes } = {}) => ({
+  components: { UInput, URow },
+  setup() {
+    return {
+      args,
+      rules: argTypes.validationRule.options,
+    };
+  },
+  template: `
+    <URow>
+      <UInput
+        v-for="(rule, index) in rules"
+        v-bind="args"
+        :validationRule="rule"
+        :key="index"
+        :description="rule"
+      />
+    </URow>
+  `,
+});
+
+const LabelPlacementTemplate = (args) => ({
+  components: { UInput, UGroup },
+  setup() {
+    return {
+      args,
+    };
+  },
+  template: `
+    <UGroup size="lg">
+      <UInput
+        v-bind="args"
+        label="top"
+        :label-outside="true"
+      />
+
+      <UInput
+        v-bind="args"
+        label="topInside"
+        :label-outside="false"
+      />
+    </UGroup>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const disabled = DefaultTemplate.bind({});
+disabled.args = { disabled: true };
+
+export const description = DefaultTemplate.bind({});
+description.args = { description: "some description text" };
+
+export const error = DefaultTemplate.bind({});
+error.args = { error: "some error text" };
+
+export const placeholder = DefaultTemplate.bind({});
+placeholder.args = { placeholder: "some placeholder text" };
+
+export const readonly = DefaultTemplate.bind({});
+readonly.args = { readonly: true, value: "some value for read" };
+
+export const noAutocomplete = DefaultTemplate.bind({});
+noAutocomplete.args = { noAutocomplete: true };
+
+export const typePassword = DefaultTemplate.bind({});
+typePassword.args = { type: "password" };
+
+export const labelPlacement = LabelPlacementTemplate.bind({});
+labelPlacement.args = {};
+
+export const sizes = SizesTemplate.bind({});
+sizes.args = {};
+
+export const validationRules = ValidationRuleTemplate.bind({});
+validationRules.args = {};
+
+export const slotLeft = SlotTemplate.bind({});
+slotLeft.args = {
+  slotTemplate: `
+    <template #left>
+      🥸
+    </template>
+  `,
+};
+
+export const slotRight = SlotTemplate.bind({});
+slotRight.args = {
+  slotTemplate: `
+    <template #right>
+      🥸
+    </template>
+  `,
+};