vueless 0.0.9 → 0.0.10

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

@@ -1,116 +0,0 @@
-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-date-picker-range/services/validation.service.js

@@ -1,22 +0,0 @@
-import { getDaysInMonth } from "../../ui.form-calendar/services/date.service";
-
-const DATE_WITH_DOT_FORMAT_REG_EXP = /^\d{2}([./-])\d{2}\1\d{4}$/;
-
-export function wrongDateFormat(value) {
-  return !!value.match(DATE_WITH_DOT_FORMAT_REG_EXP);
-}
-
-export function wrongMonthNumber(value) {
-  const splitDate = value.split(".");
-  const month = splitDate[1];
-
-  return Number(month) >= 1 && Number(month) <= 12;
-}
-
-export function wrongDayNumber(value) {
-  const [day, month, year] = value.split(".");
-
-  const daysInMonth = getDaysInMonth(new Date(year, month - 1));
-
-  return Number(day) >= 1 && Number(day) <= Number(daysInMonth);
-}

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

@@ -1,16 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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

@@ -1,5 +0,0 @@
-/*
-  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

@@ -1,166 +0,0 @@
-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>
-  `,
-};