vueless 0.0.2 → 0.0.3

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

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

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

@@ -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/ui.form-switch/index.stories.js

@@ -5,6 +5,7 @@ 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: {
@@ -25,7 +26,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const ColorsTemplate = (args, { argTypes }) => ({
+const ColorsTemplate = (args, { argTypes } = {}) => ({
   components: { USwitch, URow },
   setup() {
     return {
@@ -37,29 +38,8 @@ const ColorsTemplate = (args, { argTypes }) => ({
     <URow>
       <USwitch
         v-for="(color, index) in colors"
-        :color="color"
-        v-bind="args"
-        v-model="args.value"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-const LabelVariantsTemplate = (args, { argTypes }) => ({
-  components: { USwitch, URow },
-  setup() {
-    return {
-      args,
-      labelVariants: argTypes.labelVariant.options,
-    };
-  },
-  template: `
-    <URow>
-      <USwitch
-        v-for="(labelVariant, index) in labelVariants"
-        :labelVariant="labelVariant"
         v-bind="args"
+        :color="color"
         v-model="args.value"
         :key="index"
       />
@@ -67,7 +47,7 @@ const LabelVariantsTemplate = (args, { argTypes }) => ({
   `,
 });
 
-const SizesTemplate = (args, { argTypes }) => ({
+const SizesTemplate = (args, { argTypes } = {}) => ({
   components: { USwitch, URow },
   setup() {
     return {
@@ -79,8 +59,8 @@ const SizesTemplate = (args, { argTypes }) => ({
     <URow>
       <USwitch
         v-for="(size, index) in sizes"
-        :size="size"
         v-bind="args"
+        :size="size"
         v-model="args.value"
         :key="index"
       />
@@ -89,7 +69,7 @@ const SizesTemplate = (args, { argTypes }) => ({
 });
 
 export const Default = DefaultTemplate.bind({});
-Default.args = { color: "blue" };
+Default.args = {};
 
 export const label = DefaultTemplate.bind({});
 label.args = { label: "Some label" };
@@ -100,27 +80,14 @@ description.args = { label: "Label", description: "Some description" };
 export const colors = ColorsTemplate.bind({});
 colors.args = { modelValue: true };
 
-export const labelVariants = LabelVariantsTemplate.bind({});
-labelVariants.args = { modelValue: true, color: "yellow" };
+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 = { withIcon: true, color: "yellow" };
+icon.args = { toggleIcon: true, color: "yellow" };
 
 export const disabled = DefaultTemplate.bind({});
 disabled.args = { disabled: true };
-
-export const slotLabel = DefaultTemplate.bind({});
-slotLabel.args = {
-  slotTemplate: `
-    <template #label>
-      <UIcon
-        name="Close"
-        color="brand"
-        pill-filled
-       />
-    </template>
-  `,
-};