vueless 0.0.4 → 0.0.5

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

@@ -0,0 +1,98 @@
+export default class SelectService {
+  static filterOptions(options, search, label) {
+    return search
+      ? options
+          .filter((option) => this.interpolateLabel(option, label).includes(search))
+          .sort((a, b) => {
+            return this.interpolateLabel(a, label).length - this.interpolateLabel(b, label).length;
+          })
+      : options;
+  }
+
+  static filterGroups(options, search, label, values, groupLabel) {
+    return options.map((group) => {
+      if (!group[values]) {
+        // eslint-disable-next-line no-console
+        console.warn("Options passed to select do not contain groups, despite the config.");
+
+        return [];
+      }
+
+      const groupOptions = this.filterOptions(group[values], search, label);
+
+      return groupOptions.length
+        ? {
+            [groupLabel]: group[groupLabel],
+            [values]: groupOptions,
+          }
+        : [];
+    });
+  }
+
+  static flattenOptions(options, values, label) {
+    return options.reduce((prev, curr) => {
+      if (curr[values] && curr[values].length) {
+        prev.push({
+          $groupLabel: curr[label],
+          $isLabel: true,
+        });
+
+        return prev.concat(curr[values]);
+      }
+
+      return prev;
+    }, []);
+  }
+
+  static isEmpty(opt) {
+    if (opt === 0) return false;
+    if (Array.isArray(opt) && opt.length === 0) return true;
+
+    return !opt;
+  }
+
+  static removeEmptyGroups(options, groupValues) {
+    return options.filter((group) => {
+      return Boolean(group[groupValues].filter((item) => !item.isSubGroup).length);
+    });
+  }
+
+  static removeSelectedValues(options, groupValues, valueKey, modelValue) {
+    if (!groupValues) {
+      return options.filter((option) => !modelValue.includes(option[valueKey]));
+    }
+
+    const availableValues = options.map((group) => {
+      return {
+        ...group,
+        [groupValues]: group[groupValues].filter((item) => !modelValue.includes(item[valueKey])),
+      };
+    });
+
+    return this.removeEmptyGroups(availableValues, groupValues);
+  }
+
+  static interpolateLabel(option, label) {
+    if (this.isEmpty(option)) return "";
+
+    return label ? option[label] : option;
+  }
+
+  static getGroupOption(item, options, groupValues, valueKey) {
+    const groupOptions = options.find((option) =>
+      option[groupValues]?.find((value) => value[valueKey] === item),
+    );
+
+    return groupOptions?.[groupValues].find((value) => value[valueKey] === item);
+  }
+
+  static getCurrentOption(item, options, groupValues, valueKey) {
+    if (groupValues) {
+      return this.getGroupOption(item, options, groupValues, valueKey);
+    }
+
+    const value = item[valueKey] || item;
+
+    return options.find((option) => option[valueKey] === value);
+  }
+}

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

@@ -0,0 +1,77 @@
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
+
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+
+export function useAttrs(props, { checked }) {
+  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { wrapper, circle, toggleLabel } = config.value;
+
+  const cvaWrapper = cva({
+    base: wrapper.base,
+    variants: wrapper.variants,
+    compoundVariants: wrapper.compoundVariants,
+  });
+
+  const cvaCircle = cva({
+    base: circle.base,
+    variants: circle.variants,
+    compoundVariants: circle.compoundVariants,
+  });
+
+  const cvaToggleLabel = cva({
+    base: toggleLabel.base,
+    variants: toggleLabel.variants,
+    compoundVariants: toggleLabel.compoundVariants,
+  });
+
+  const wrapperClasses = computed(() =>
+    setColor(
+      cvaWrapper({
+        size: props.size,
+        color: props.color,
+        disabled: props.disabled,
+        checked: Boolean(checked.value),
+        toggleLabel: props.toggleLabel,
+      }),
+      props.color,
+    ),
+  );
+
+  const circleClasses = computed(() =>
+    cvaCircle({
+      size: props.size,
+      checked: Boolean(checked.value),
+    }),
+  );
+
+  const toggleLabelClasses = computed(() =>
+    setColor(
+      cvaToggleLabel({
+        size: props.size,
+        color: props.color,
+        toggleLabel: props.toggleLabel,
+        checked: Boolean(checked.value),
+      }),
+      props.color,
+    ),
+  );
+
+  const labelAttrs = getAttrs("label", { isComponent: true });
+  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
+  const inputAttrs = getAttrs("input");
+  const circleAttrs = getAttrs("circle", { classes: circleClasses });
+  const iconAttrs = getAttrs("icon", { isComponent: true });
+  const toggleLabelAttrs = getAttrs("toggleLabel", { classes: toggleLabelClasses });
+
+  return {
+    config,
+    iconAttrs,
+    labelAttrs,
+    wrapperAttrs,
+    circleAttrs,
+    toggleLabelAttrs,
+    inputAttrs,
+  };
+}

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

@@ -0,0 +1,76 @@
+export default /*tw*/ {
+  label: "flex items-start",
+  wrapper: {
+    base: `
+      transition-all duration-300 ease-in-out
+      flex items-center p-0.5 relative rounded-3xl cursor-pointer
+      ring-opacity-10 focus-within:ring-4
+    `,
+    variants: {
+      checked: {
+        true: "bg-{color}-500 ring-{color}-700 hover:bg-{color}-600 active:bg-{color}-700",
+        false: "bg-gray-300 ring-gray-700 hover:bg-gray-400 active:bg-gray-500",
+      },
+      size: {
+        sm: "w-8",
+        md: "w-10",
+        lg: "w-12",
+      },
+    },
+    compoundVariants: [
+      { toggleLabel: true, size: "sm", class: "w-12" },
+      { toggleLabel: true, size: "md", class: "w-14" },
+      { toggleLabel: true, size: "lg", class: "w-16" },
+      { disabled: true, checked: true, class: "bg-opacity-50 pointer-events-none" },
+      { disabled: true, checked: false, class: "bg-opacity-50 pointer-events-none" },
+      { color: "grayscale", checked: true, class: "bg-gray-800 ring-gray-800" },
+    ],
+  },
+  input: "absolute size-0 opacity-0",
+  circle: {
+    base: "transition-all duration-300 ease-in-out rounded-full bg-white flex items-center justify-center",
+    variants: {
+      size: {
+        sm: "size-4",
+        md: "size-5",
+        lg: "size-6",
+      },
+    },
+    compoundVariants: [
+      { checked: true, size: "sm", class: "ml-[calc(100%-1rem)]" },
+      { checked: true, size: "md", class: "ml-[calc(100%-1.25rem)]" },
+      { checked: true, size: "lg", class: "ml-[calc(100%-1.5rem)]" },
+    ],
+  },
+  icon: "",
+  selectedIconName: "check",
+  unselectedIconName: "close",
+  toggleLabel: {
+    base: "absolute text-center text-2xs font-medium uppercase text-white transition-all duration-300 ease-in-out ",
+    compoundVariants: [
+      { toggleLabel: true, checked: true, class: "w-1/2 left-1" },
+      { toggleLabel: true, checked: false, class: "w-1/2 right-1" },
+      { toggleLabel: false, checked: true, class: "bg-{color}-500 hover:bg-{color}-600 active:bg-{color}-700" },
+      { toggleLabel: false, checked: false, class: "bg-gray-300 hover:bg-gray-400 active:bg-gray-500" },
+      { toggleLabel: false, color: "grayscale", class: "bg-gray-700 hover:bg-gray-800 active:bg-gray-900" },
+    ],
+  },
+  i18n: {
+    inactive: "Off",
+    active: "On",
+  },
+  defaultVariants: {
+    color: "brand",
+    size: "md",
+    labelAlign: "left",
+    disabled: false,
+    toggleIcon: false,
+    toggleLabel: false,
+  },
+  safelist: (colors) => [
+    { pattern: `ring-(${colors})-700` },
+    { pattern: `bg-(${colors})-500` },
+    { pattern: `bg-(${colors})-600`, variants: ["hover"] },
+    { pattern: `bg-(${colors})-700`, variants: ["active"] },
+  ],
+};

package/src/ui.form-switch/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 USwitch = "USwitch";

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

@@ -0,0 +1,93 @@
+import { getArgTypes } from "../service.storybook";
+
+import USwitch from "../ui.form-switch";
+import UIcon from "../ui.image-icon";
+import URow from "../ui.container-row";
+
+export default {
+  id: "3130",
+  title: "Form Inputs & Controls / Switch",
+  component: USwitch,
+  args: {
+    modelValue: false,
+  },
+  argTypes: {
+    ...getArgTypes(USwitch.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { USwitch, UIcon },
+  setup() {
+    return { args };
+  },
+  template: `
+    <USwitch v-bind="args" v-model="args.value" />
+  `,
+});
+
+const ColorsTemplate = (args, { argTypes } = {}) => ({
+  components: { USwitch, URow },
+  setup() {
+    return {
+      args,
+      colors: argTypes.color.options,
+    };
+  },
+  template: `
+    <URow>
+      <USwitch
+        v-for="(color, index) in colors"
+        v-bind="args"
+        :color="color"
+        v-model="args.value"
+        :key="index"
+      />
+    </URow>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { USwitch, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <URow>
+      <USwitch
+        v-for="(size, index) in sizes"
+        v-bind="args"
+        :size="size"
+        v-model="args.value"
+        :key="index"
+      />
+    </URow>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const label = DefaultTemplate.bind({});
+label.args = { label: "Some label" };
+
+export const description = DefaultTemplate.bind({});
+description.args = { label: "Label", description: "Some description" };
+
+export const colors = ColorsTemplate.bind({});
+colors.args = { modelValue: true };
+
+export const toggleLabel = DefaultTemplate.bind({});
+toggleLabel.args = { toggleLabel: true };
+
+export const sizes = SizesTemplate.bind({});
+sizes.args = { color: "yellow" };
+
+export const icon = DefaultTemplate.bind({});
+icon.args = { toggleIcon: true, color: "yellow" };
+
+export const disabled = DefaultTemplate.bind({});
+disabled.args = { disabled: true };

package/src/ui.form-switch/index.vue

@@ -0,0 +1,198 @@
+<template>
+  <ULabel
+    :for="id"
+    :size="size"
+    :label="label"
+    :description="description"
+    :align="labelAlign"
+    :disabled="disabled"
+    :data-cy="dataCy"
+    v-bind="labelAttrs"
+    @click="onClickToggle"
+  >
+    <label :for="id" v-bind="wrapperAttrs">
+      <input
+        :id="id"
+        v-model="checkedValue"
+        type="checkbox"
+        :disabled="disabled"
+        v-bind="inputAttrs"
+        @click="onClickToggle"
+        @keydown.space="onKeydownSpace"
+      />
+
+      <span v-bind="circleAttrs">
+        <UIcon
+          v-if="toggleIcon"
+          :name="iconName"
+          :color="iconColor"
+          :size="iconSize"
+          v-bind="iconAttrs"
+        />
+      </span>
+
+      <span v-if="toggleLabel" v-bind="toggleLabelAttrs" v-text="switchLabel" />
+    </label>
+  </ULabel>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+import UIcon from "../ui.image-icon";
+import UIService, { getRandomId } from "../service.ui";
+
+import { USwitch } from "./constants";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "USwitch", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Set switch value.
+   */
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * Label alignment.
+   * @values left, right
+   */
+  labelAlign: {
+    type: String,
+    default: UIService.get(defaultConfig, USwitch).default.labelAlign,
+  },
+
+  /**
+   * Set label.
+   */
+  label: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Set description.
+   */
+  description: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * The size of the switch.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, USwitch).default.size,
+  },
+
+  /**
+   * The color of the switch.
+   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white   */
+  color: {
+    type: String,
+    default: UIService.get(defaultConfig, USwitch).default.color,
+  },
+
+  /**
+   * Show on / off icon inside circle.
+   */
+  toggleIcon: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, USwitch).default.toggleIcon,
+  },
+
+  /**
+   * The label variant of the switch.
+   */
+  toggleLabel: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, USwitch).default.toggleLabel,
+  },
+
+  /**
+   * Show on / off icon inside circle.
+   */
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, USwitch).default.disabled,
+  },
+
+  /**
+   * Unique element id.
+   * @ignore
+   */
+  id: {
+    type: String,
+    default: () => getRandomId(),
+  },
+
+  /**
+   * Sets component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Sets data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const checkedValue = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+});
+
+const { config, iconAttrs, labelAttrs, inputAttrs, wrapperAttrs, circleAttrs, toggleLabelAttrs } =
+  useAttrs(props, { checked: checkedValue });
+
+const switchLabel = computed(() => {
+  return checkedValue.value ? config.value.i18n.active : config.value.i18n.inactive;
+});
+
+const iconSize = computed(() => {
+  const sizes = {
+    sm: "2xs",
+    md: "xs",
+    lg: "sm",
+  };
+
+  return sizes[props.size];
+});
+
+const iconColor = computed(() => {
+  return checkedValue.value ? props.color : "grayscale";
+});
+
+const iconName = computed(() => {
+  return checkedValue.value ? config.value.selectedIconName : config.value.unselectedIconName;
+});
+
+function toggle() {
+  if (!props.disabled) {
+    checkedValue.value = !checkedValue.value;
+  }
+}
+
+function onClickToggle() {
+  toggle();
+}
+
+function onKeydownSpace() {
+  toggle();
+}
+</script>

package/src/ui.form-switch/services/variant.service.js

@@ -0,0 +1,31 @@
+import { cva } from "../../service.ui";
+
+export default class VariantService {
+  static get(config) {
+    const { wrapper, circle, toggleLabel } = config;
+
+    const wrapperVariants = cva({
+      base: wrapper.base,
+      variants: wrapper.variants,
+      compoundVariants: wrapper.compoundVariants,
+    });
+
+    const circleVariants = cva({
+      base: circle.base,
+      variants: circle.variants,
+      compoundVariants: circle.compoundVariants,
+    });
+
+    const toggleLabelVariants = cva({
+      base: toggleLabel.base,
+      variants: toggleLabel.variants,
+      compoundVariants: toggleLabel.compoundVariants,
+    });
+
+    return {
+      wrapperVariants,
+      circleVariants,
+      toggleLabelVariants,
+    };
+  }
+}

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

@@ -0,0 +1,52 @@
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
+
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+
+export function useAttrs(props) {
+  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { textarea, textareaWrapper } = config.value;
+
+  const cvaTextarea = cva({
+    base: textarea.base,
+    variants: textarea.variants,
+    compoundVariants: textarea.compoundVariants,
+  });
+
+  const cvaTextareaWrapper = cva({
+    base: textareaWrapper.base,
+    variants: textareaWrapper.variants,
+    compoundVariants: textareaWrapper.compoundVariants,
+  });
+
+  const textareaClasses = computed(() =>
+    cvaTextarea({
+      error: Boolean(props.error),
+      size: props.size,
+      readonly: props.readonly,
+      disabled: props.disabled,
+      labelAlign: props.labelAlign,
+      label: Boolean(props.label),
+    }),
+  );
+
+  const textareaWrapperClasses = computed(() => cvaTextareaWrapper({ size: props.size }));
+
+  const wrapperAttrs = getAttrs("wrapper");
+  const leftSlotAttrs = getAttrs("leftSlot");
+  const rightSlotAttrs = getAttrs("rightSlot");
+  const labelAttrs = getAttrs("label", { isComponent: true });
+  const textareaWrapperAttrs = getAttrs("textareaWrapper", { classes: textareaWrapperClasses });
+  const textareaAttrs = getAttrs("textarea", { classes: textareaClasses });
+
+  return {
+    textareaAttrs,
+    labelAttrs,
+    textareaWrapperAttrs,
+    leftSlotAttrs,
+    rightSlotAttrs,
+    wrapperAttrs,
+    hasSlotContent,
+  };
+}