vueless 0.0.3 → 0.0.4

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

@@ -1,98 +0,0 @@
-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/ui.form-switch/composables/attrs.composable.js

@@ -1,77 +0,0 @@
-import useUI from "vueless/composable.ui";
-import { cva } from "vueless/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/ui.form-switch/configs/default.config.js

@@ -1,72 +0,0 @@
-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" },
-    ],
-  },
-  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/ui.form-switch/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 USwitch = "USwitch";

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

@@ -1,93 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import USwitch from "vueless/ui.form-switch";
-import UIcon from "vueless/ui.image-icon";
-import URow from "vueless/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/ui.form-switch/index.vue

@@ -1,218 +0,0 @@
-<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 "vueless/ui.image-icon";
-import UIService, { getRandomId } from "vueless/service.ui";
-import I18nServiceDefault from "@vueless/services/i18n";
-
-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 { getTranslation } = new I18nServiceDefault();
-
-const i18n = computed(() => ({
-  active: getTranslation("active"),
-  inactive: getTranslation("inactive"),
-}));
-
-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 ? i18n.value.active : i18n.value.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>
-
-<i18n>
-en:
-  inactive: "Off"
-  active: "On"
-ru:
-  inactive: "Выкл"
-  active: "Вкл"
-ua:
-  inactive: "Викл"
-  active: "Вкл"
-</i18n>

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

@@ -1,31 +0,0 @@
-import { cva } from "vueless/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/ui.form-textarea/Docs.mdx

@@ -1,16 +0,0 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
-import { getSource } from "vueless/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/ui.form-textarea/composables/attrs.composable.js

@@ -1,52 +0,0 @@
-import useUI from "vueless/composable.ui";
-import { cva } from "vueless/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,
-  };
-}