vueless 0.0.4 → 0.0.5

package/src/ui.form-calendar/services/calendar.service.js

@@ -0,0 +1,189 @@
+import { revFormat, formats } from "./formatting.service";
+import { isSameDay, getDateFromUnixTimestamp } from "./date.service";
+
+import { TOKEN_REG_EXP, YEARS_PER_VIEW } from "../constants";
+
+export function getInitialActiveDate(localValue) {
+  if (Array.isArray(localValue) && localValue.length) {
+    return localValue[localValue.length - 1];
+  }
+
+  if (localValue instanceof Date) {
+    return localValue;
+  }
+
+  return new Date();
+}
+
+export function formatDate(dateObj, format, locale) {
+  if (dateObj === null) {
+    return "";
+  }
+
+  return format
+    .split("")
+    .map((char, i, arr) => {
+      if (formats[char] && arr[i - 1] !== "\\") {
+        return formats[char](dateObj, locale);
+      }
+
+      if (char !== "\\") {
+        return char;
+      }
+
+      return "";
+    })
+    .join("");
+}
+
+export function isNumeric(char) {
+  return /^\d+$/.test(String(char));
+}
+
+export function parseDate(date, format = "Y-m-d H:i:S", locale) {
+  if (date === null) {
+    return null;
+  }
+
+  const localeTokenRegex = { ...TOKEN_REG_EXP };
+
+  let timeless = false;
+  let parsedDate = null;
+  const originalDate = date;
+
+  const isDateObject = date instanceof Date;
+  const isTimestamp = typeof date !== "string" && date.toFixed !== undefined;
+  const isString = typeof date === "string";
+
+  if (isDateObject) {
+    parsedDate = new Date(date.getTime());
+  }
+
+  if (isTimestamp) {
+    parsedDate = getDateFromUnixTimestamp(date);
+  }
+
+  if (isString) {
+    const dateString = String(date).trim();
+
+    if (dateString === "today") {
+      parsedDate = new Date();
+      timeless = true;
+    } else {
+      parsedDate = parseStringDate(date, format, localeTokenRegex, locale);
+    }
+  }
+
+  if (!(parsedDate instanceof Date && !isNaN(parsedDate.getTime()))) {
+    throw new Error(`Invalid date provided: ${originalDate}`);
+  }
+
+  if (timeless === true) {
+    parsedDate.setHours(0, 0, 0, 0);
+  }
+
+  return parsedDate;
+}
+
+export function parseStringDate(dateString, format, localeTokenRegex, locale) {
+  const isWithinTimezone = /Z$/.test(dateString) || /GMT$/.test(dateString);
+
+  if (isWithinTimezone) {
+    return new Date(dateString);
+  } else {
+    let parsedDate = new Date(new Date().getFullYear(), 0, 1, 0, 0, 0, 0);
+
+    let matched;
+    const ops = [];
+
+    for (let i = 0, matchIndex = 0, regexStr = ""; i < format.length; i += 1) {
+      const token2 = format[i];
+      const isBackSlash = token2 === "\\";
+      const escaped = format[i - 1] === "\\" || isBackSlash;
+
+      if (localeTokenRegex[token2] && !escaped) {
+        regexStr += localeTokenRegex[token2];
+        const match = new RegExp(regexStr).exec(dateString);
+
+        if (match) {
+          matched = true;
+          ops[token2 !== "Y" ? "push" : "unshift"]({
+            fn: revFormat[token2],
+            val: match[(matchIndex += 1)],
+          });
+        }
+      } else if (!isBackSlash) {
+        regexStr += ".";
+      }
+
+      ops.forEach((op) => {
+        const { fn } = op;
+        const { val } = op;
+
+        parsedDate = fn(parsedDate, String(val), locale) || parsedDate;
+      });
+    }
+
+    return matched ? parsedDate : undefined;
+  }
+}
+
+export function dayIsPartOfTheConditions(day, condition, dateParser, dateFormat) {
+  if (!day) {
+    return false;
+  }
+
+  if (typeof condition === "function") {
+    return condition(day);
+  }
+
+  if (typeof condition === "string" || condition instanceof String) {
+    const disabledDate = dateParser(condition, dateFormat);
+
+    return isSameDay(disabledDate, day);
+  }
+
+  if (condition instanceof Date) {
+    return isSameDay(condition, day);
+  }
+
+  if (Array.isArray(condition)) {
+    return condition.some((c) => dayIsPartOfTheConditions(day, c, dateParser, dateFormat));
+  }
+
+  return false;
+}
+
+export function dateIsOutOfRange(date, min, max, locale, dateFormat = null) {
+  if ((!dateFormat && typeof min === "string") || (!dateFormat && typeof max === "string")) {
+    throw new Error("strings needs a date format");
+  }
+
+  const minDate = typeof min === "string" ? parseDate(min, dateFormat, locale) : min;
+
+  const maxDate = typeof max === "string" ? parseDate(max, dateFormat, locale) : max;
+
+  const time = date.getTime();
+
+  if (minDate && maxDate) {
+    return time < minDate.getTime() || time > maxDate.getTime();
+  }
+
+  if (minDate) {
+    return time < minDate.getTime();
+  }
+
+  if (maxDate) {
+    return time > maxDate.getTime();
+  }
+
+  return false;
+}
+
+export function getYearsRange(date) {
+  const currentYear = date.getFullYear();
+  const from = currentYear - Math.floor(currentYear % YEARS_PER_VIEW);
+  const to = from + YEARS_PER_VIEW - 1;
+
+  return [from, to];
+}

package/src/ui.form-calendar/services/formatting.service.js

@@ -0,0 +1,180 @@
+const pad = (number, length = 2) => `000${number}`.slice(length * -1);
+const int = (bool) => (bool === true ? 1 : 0);
+
+const doNothing = () => undefined;
+
+export const monthToStr = (monthNumber, shorthand, locale) => {
+  return locale.months[shorthand ? "shorthand" : "longhand"][monthNumber];
+};
+
+export const revFormat = {
+  D: doNothing,
+  F(dateObj, monthName, locale) {
+    dateObj.setMonth(locale.months.longhand.indexOf(monthName));
+  },
+  G: (dateObj, hour) => {
+    dateObj.setHours(parseFloat(hour));
+  },
+  H: (dateObj, hour) => {
+    dateObj.setHours(parseFloat(hour));
+  },
+  J: (dateObj, day) => {
+    dateObj.setDate(parseFloat(day));
+  },
+  K: (dateObj, amPM, locale) => {
+    dateObj.setHours(
+      (dateObj.getHours() % 12) + 12 * int(new RegExp(locale.amPM[1], "i").test(amPM)),
+    );
+  },
+  M(dateObj, shortMonth, locale) {
+    dateObj.setMonth(locale.months.shorthand.indexOf(shortMonth));
+  },
+  S: (dateObj, seconds) => {
+    dateObj.setSeconds(parseFloat(seconds));
+  },
+  U: (_, unixSeconds) => new Date(parseFloat(unixSeconds) * 1000),
+
+  W(dateObj, weekNum, locale) {
+    const weekNumber = parseInt(weekNum, 10);
+    const date = new Date(dateObj.getFullYear(), 0, 2 + (weekNumber - 1) * 7, 0, 0, 0, 0);
+
+    date.setDate(date.getDate() - date.getDay() + locale.firstDayOfWeek);
+
+    return date;
+  },
+  Y: (dateObj, year) => {
+    dateObj.setFullYear(parseFloat(year));
+  },
+  Z: (_, ISODate) => new Date(ISODate),
+
+  d: (dateObj, day) => {
+    dateObj.setDate(parseFloat(day));
+  },
+  h: (dateObj, hour) => {
+    dateObj.setHours(parseFloat(hour));
+  },
+  i: (dateObj, minutes) => {
+    dateObj.setMinutes(parseFloat(minutes));
+  },
+  j: (dateObj, day) => {
+    dateObj.setDate(parseFloat(day));
+  },
+  l: doNothing,
+  m: (dateObj, month) => {
+    dateObj.setMonth(parseFloat(month) - 1);
+  },
+  n: (dateObj, month) => {
+    dateObj.setMonth(parseFloat(month) - 1);
+  },
+  s: (dateObj, seconds) => {
+    dateObj.setSeconds(parseFloat(seconds));
+  },
+  u: (_, unixMillSeconds) => new Date(parseFloat(unixMillSeconds)),
+  w: doNothing,
+  y: (dateObj, year) => {
+    dateObj.setFullYear(2000 + parseFloat(year));
+  },
+};
+
+export const formats = {
+  // get the date in UTC
+  Z: (date) => date.toISOString(),
+
+  // weekday name, short, e.g. Thu
+  D(date, locale) {
+    return locale.weekdays.shorthand[formats.w(date, locale)];
+  },
+
+  // full month name e.g. January
+  F(date, locale) {
+    return monthToStr(formats.n(date, locale) - 1, false, locale);
+  },
+
+  // padded hour 1-12
+  G(date, locale) {
+    return pad(formats.h(date, locale));
+  },
+
+  // hours with leading zero e.g. 03
+  H: (date) => pad(date.getHours()),
+
+  // day (1-30) with ordinal suffix e.g. 1st, 2nd
+  J(date, locale) {
+    return locale.ordinal !== undefined
+      ? date.getDate() + locale.ordinal(date.getDate())
+      : undefined;
+  },
+
+  // AM/PM
+  K: (date, locale) => locale.amPM[int(date.getHours() > 11)],
+
+  // shorthand month e.g. Jan, Sep, Oct, etc
+  M(date, locale) {
+    return monthToStr(date.getMonth(), true, locale);
+  },
+
+  // seconds 00-59
+  S: (date) => pad(date.getSeconds()),
+
+  // unix timestamp
+  U: (date) => date.getTime() / 1000,
+
+  W(givenDate) {
+    // return options.getWeek(date);
+    const date = new Date(givenDate.getTime());
+
+    date.setHours(0, 0, 0, 0);
+
+    // Thursday in current week decides the year.
+    date.setDate(date.getDate() + 3 - ((date.getDay() + 6) % 7));
+
+    // January 4 is always in week 1.
+    const week1 = new Date(date.getFullYear(), 0, 4);
+
+    // Adjust to Thursday in week 1 and count number of weeks from date to week1.
+    return (
+      1 +
+      Math.round(
+        ((date.getTime() - week1.getTime()) / 86400000 - 3 + ((week1.getDay() + 6) % 7)) / 7,
+      )
+    );
+  },
+
+  // full year e.g. 2016, padded (0001-9999)
+  Y: (date) => pad(date.getFullYear(), 4),
+
+  // day in month, padded (01-30)
+  d: (date) => pad(date.getDate()),
+
+  // hour from 1-12 (am/pm)
+  h: (date) => (date.getHours() % 12 ? date.getHours() % 12 : 12),
+
+  // minutes, padded with leading zero e.g. 09
+  i: (date) => pad(date.getMinutes()),
+
+  // day in month (1-30)
+  j: (date) => date.getDate(),
+
+  // weekday name, full, e.g. Thursday
+  l(date, locale) {
+    return locale.weekdays.longhand[date.getDay()];
+  },
+
+  // padded month number (01-12)
+  m: (date) => pad(date.getMonth() + 1),
+
+  // the month number (1-12)
+  n: (date) => date.getMonth() + 1,
+
+  // seconds 0-59
+  s: (date) => date.getSeconds(),
+
+  // Unix Milliseconds
+  u: (date) => date.getTime(),
+
+  // number of the day of the week
+  w: (date) => date.getDay(),
+
+  // last two digits of year e.g. 16 for 2016
+  y: (date) => String(date.getFullYear()).substring(2),
+};

package/src/ui.form-checkbox/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-checkbox/configs/default.config.js

@@ -0,0 +1,69 @@
+export default /*tw*/ {
+  label: "w-auto max-w-max relative gap-0",
+  partialIconName: "remove",
+  selectedIconName: "check",
+  iconWrapper: {
+    base: "flex items-center justify-center absolute rounded bg-{color}-500",
+    variants: {
+      size: {
+        sm: "size-5",
+        md: "size-6",
+        lg: "size-7",
+      },
+      color: {
+        grayscale: "border-gray-900 bg-gray-900",
+      },
+    },
+  },
+  icon: "",
+  checkbox: {
+    base: `
+      border border-solid border-{color}-300 rounded bg-white
+      hover:border-{color}-400
+      focus:border-{color}-500 focus:ring-4 focus:ring-{color}-200 focus:ring-offset-0
+      active:border-{color}-500 active:bg-{color}-500
+      checked:border-{color}-500 checked:bg-{color}-500 checked:hover:bg-{color}-500
+      checked:text-{color}-500 checked:bg-none
+      checked:focus:text-{color}-500 checked:active:text-{color}-500
+    `,
+    variants: {
+      size: {
+        sm: "size-5 text-sm",
+        md: "size-6",
+        lg: "size-7 text-lg",
+      },
+      color: {
+        grayscale: `
+          border-gray-300
+          hover:border-gray-400
+          focus:border-gray-500 focus:ring-gray-200
+          checked:border-gray-900 checked:bg-gray-900 checked:text-gray-900
+          active:border-gray-900 active:bg-gray-900
+        `,
+      },
+      disabled: {
+        true: `
+          border-gray-100 bg-gray-100 opacity-50
+          hover:border-gray-100 hover:bg-gray-100 hover:opacity-50
+          active:border-gray-100 active:bg-gray-100 active:opacity-50
+        `,
+      },
+    },
+  },
+  defaultVariants: {
+    color: "brand",
+    size: "md",
+    labelAlign: "left",
+    partial: false,
+    disabled: false,
+  },
+  safelist: (colors) => [
+    { pattern: `bg-(${colors})-900` /* , variants: ["checked:hover", "checked", "active"] */ },
+    { pattern: `border-(${colors})-300` },
+    { pattern: `border-(${colors})-400`, variants: ["hover"] },
+    { pattern: `border-(${colors})-500`, variants: ["focus"] },
+    { pattern: `border-(${colors})-500`, variants: ["active", "checked"] },
+    { pattern: `text-(${colors})-500`, variants: ["checked:focus", "checked", "checked:active"] },
+    { pattern: `ring-(${colors})-200`, variants: ["focus"] },
+  ],
+};

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

@@ -0,0 +1,147 @@
+import { getArgTypes, getSlotNames } from "../service.storybook";
+
+import UCheckbox from "../ui.form-checkbox";
+import UCheckboxGroup from "../ui.form-checkbox-group";
+import UBadge from "../ui.text-badge";
+import UGroup from "../ui.container-group";
+
+export default {
+  id: "3100",
+  title: "Form Inputs & Controls / Checkbox",
+  component: UCheckbox,
+  args: {
+    label: "Label",
+    value: {},
+  },
+  argTypes: {
+    ...getArgTypes(UCheckbox.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UCheckbox },
+  setup() {
+    const slots = getSlotNames(UCheckbox.name);
+
+    return { args, slots };
+  },
+  template: `
+    <UCheckbox v-bind="args" v-model="args.value">
+      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
+        <template v-if="args[slot]">{{ args[slot] }}</template>
+      </template>
+    </UCheckbox>
+  `,
+});
+
+const ValueTypesTemplate = (args) => ({
+  components: { UCheckbox, UCheckboxGroup, UGroup },
+  setup() {
+    return { args };
+  },
+  data() {
+    return {
+      defaultValue: false,
+      arrayValue: [],
+      customValue: { vue: "less" },
+    };
+  },
+  template: `
+    <UGroup size="lg">
+      <UCheckbox
+        v-bind="args"
+        v-model="defaultValue"
+        label="Default"
+        :description="String(defaultValue)"
+      />
+
+      <UCheckbox
+        v-bind="args"
+        v-model="customValue"
+        :true-value="{ vue: 'less' }"
+        false-value="0"
+        :description="JSON.stringify(customValue)"
+        label="Custom"
+      />
+
+      <div>
+        <UCheckboxGroup name="checkboxGroup" label="Checkbox group">
+          <UCheckbox
+            v-bind="args"
+            v-model="arrayValue"
+            :value="{ key: 'value' }"
+            label="Array with object value"
+          />
+          <UCheckbox
+            v-bind="args"
+            v-model="arrayValue"
+            value="someString"
+            label="Array with custom string value"
+          />
+        </UCheckboxGroup>
+
+        <span class="font-normal text-gray-500/[85] text-xs pl-0 mt-1">
+          {{ arrayValue }}
+        </span>
+      </div>
+    </UGroup>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { UCheckbox, UGroup },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <UGroup size="lg">
+      <UCheckbox
+        v-for="(size, index) in sizes"
+        :key="index"
+        v-bind="args"
+        v-model="args.value[size]"
+        :size="size"
+        :label="size"
+      />
+    </UGroup>
+  `,
+});
+
+const SlotTemplate = (args) => ({
+  components: { UCheckbox, UBadge },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UCheckbox v-bind="args" v-model="args.value" description="hello">
+      ${args.slotTemplate}
+    </UCheckbox>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const CustomValues = ValueTypesTemplate.bind({});
+CustomValues.args = {};
+
+export const Sizes = SizesTemplate.bind({});
+Sizes.args = {};
+
+export const Disabled = DefaultTemplate.bind({});
+Disabled.args = { disabled: true };
+
+export const Description = DefaultTemplate.bind({});
+Description.args = { description: "Some description" };
+
+export const slotFooter = SlotTemplate.bind({});
+slotFooter.args = {
+  slotTemplate: `
+    <template #footer>
+      <UBadge label="favourite" color="green" size="sm" />
+    </template>
+  `,
+};

package/src/ui.form-checkbox-group/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-checkbox-group/composables/attrs.composable.js

@@ -0,0 +1,17 @@
+import useUI from "../../composable.ui";
+
+import defaultConfig from "../configs/default.config";
+
+export function useAttrs(props) {
+  const { getAttrs } = useUI(defaultConfig, () => props.config);
+
+  const labelAttrs = getAttrs("label", { isComponent: true });
+  const listAttrs = getAttrs("list");
+  const checkboxAttrs = getAttrs("checkbox", { isComponent: true });
+
+  return {
+    labelAttrs,
+    checkboxAttrs,
+    listAttrs,
+  };
+}

package/src/ui.form-checkbox-group/configs/default.config.js

@@ -0,0 +1,5 @@
+export default /*tw*/ {
+  label: "",
+  list: "ml-4 flex flex-col gap-4 relative",
+  checkbox: "",
+};

package/src/ui.form-checkbox-group/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 UCheckboxGroup = "UCheckboxGroup";

package/src/ui.form-checkbox-group/index.stories.js

@@ -0,0 +1,45 @@
+import { getArgTypes } from "../service.storybook";
+
+import UCheckboxGroup from "../ui.form-checkbox-group";
+
+export default {
+  id: "3110",
+  title: "Form Inputs & Controls / Checkbox Group",
+  component: UCheckboxGroup,
+  args: {
+    label: "Label",
+    options: [
+      { label: "checkbox 1", description: "some description 1", value: "1" },
+      { label: "checkbox 2", description: "some description 2", value: "2" },
+      { label: "checkbox 3", description: "some description 3", value: "3" },
+    ],
+    value: ["1"],
+  },
+  argTypes: {
+    ...getArgTypes(UCheckboxGroup.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UCheckboxGroup },
+  setup() {
+    return { args };
+  },
+  data() {
+    return {
+      test: ["1"],
+    };
+  },
+  template: `
+    <UCheckboxGroup v-bind="args" name="default" v-model="test" />
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const disabled = DefaultTemplate.bind({});
+disabled.args = { disabled: true };
+
+export const error = DefaultTemplate.bind({});
+error.args = { error: "some error" };