vueless 0.0.10 → 0.0.12

package/ui.form-checkbox/composables/attrs.composable.js

@@ -0,0 +1,57 @@
+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, setColor } = useUI(defaultConfig, () => props.config);
+  const { checkbox, iconWrapper } = config.value;
+
+  const cvaCheckbox = cva({
+    base: checkbox.base,
+    variants: checkbox.variants,
+    compoundVariants: checkbox.compoundVariants,
+  });
+
+  const cvaIconWrapper = cva({
+    base: iconWrapper.base,
+    variants: iconWrapper.variants,
+    compoundVariants: iconWrapper.compoundVariants,
+  });
+
+  const checkboxClasses = computed(() =>
+    setColor(
+      cvaCheckbox({
+        size: props.size,
+        label: Boolean(props.label),
+        color: props.color,
+        disabled: props.color,
+      }),
+      props.color,
+    ),
+  );
+
+  const iconWrapperClasses = computed(() =>
+    setColor(
+      cvaIconWrapper({
+        size: props.size,
+        color: props.color,
+      }),
+      props.color,
+    ),
+  );
+
+  const labelAttrs = getAttrs("label", { isComponent: true });
+  const iconWrapperCellAttrs = getAttrs("iconWrapper", { classes: iconWrapperClasses });
+  const iconAttrs = getAttrs("icon", { isComponent: true });
+  const checkboxAttrs = getAttrs("checkbox", { classes: checkboxClasses });
+
+  return {
+    config,
+    checkboxAttrs,
+    iconWrapperCellAttrs,
+    labelAttrs,
+    iconAttrs,
+  };
+}

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

package/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/ui.form-checkbox/index.vue

@@ -0,0 +1,242 @@
+<template>
+  <ULabel
+    :for="id"
+    :size="size"
+    :label="label"
+    :description="description"
+    :align="labelAlign"
+    :disabled="disabled"
+    :data-cy="dataCy"
+    v-bind="labelAttrs"
+  >
+    <input
+      :id="id"
+      type="checkbox"
+      :value="checkboxValue"
+      :true-value="trueValue"
+      :false-value="falseValue"
+      :name="checkboxName"
+      :checked="isChecked"
+      :disabled="disabled"
+      v-bind="checkboxAttrs"
+      @change="onChange"
+    />
+
+    <label v-if="isChecked" v-bind="iconWrapperCellAttrs" :for="id">
+      <UIcon :name="iconName" :size="iconSize" color="white" v-bind="iconAttrs" />
+    </label>
+
+    <template #footer>
+      <slot name="footer" />
+    </template>
+  </ULabel>
+</template>
+
+<script setup>
+import { inject, ref, onMounted, computed } from "vue";
+import { isEqual } from "lodash-es";
+
+import UIcon from "../ui.image-icon";
+import ULabel from "../ui.form-label";
+
+import UIService, { getRandomId } from "../service.ui";
+
+import defaultConfig from "./configs/default.config";
+import { UCheckbox } from "./constants";
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UCheckbox", inheritAttrs: false });
+
+const checkboxGroupName = inject("checkboxGroupName", null);
+const checkboxGroupCheckedItems = inject("checkboxGroupCheckedItems", null);
+const setCheckboxGroupCheckedItems = inject("setCheckboxGroupCheckedItems", null);
+
+const props = defineProps({
+  /**
+   * Checkbox value.
+   */
+  modelValue: {
+    type: [Boolean, String, Number, Array, Object],
+    default: false,
+  },
+
+  /**
+   * Native value attribute.
+   */
+  value: {
+    type: [Boolean, String, Number, Array, Object],
+    default: "",
+  },
+
+  /**
+   * Own value for checkbox checked state.
+   */
+  trueValue: {
+    type: [Boolean, String, Number, Array, Object],
+    default: true,
+  },
+
+  /**
+   * Own value for checkbox unchecked state.
+   */
+  falseValue: {
+    type: [Boolean, String, Number, Array, Object],
+    default: false,
+  },
+
+  /**
+   * Checkbox name.
+   */
+  name: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Checkbox label.
+   */
+  label: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Checkbox label description.
+   */
+  description: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Label placement.
+   * @values left, right
+   */
+  labelAlign: {
+    type: String,
+    default: UIService.get(defaultConfig, UCheckbox).default.labelAlign,
+  },
+
+  /**
+   * Checkbox color.
+   * @values brand, grayscale, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+   */
+  color: {
+    type: String,
+    default: UIService.get(defaultConfig, UCheckbox).default.color,
+  },
+
+  /**
+   * Checkbox size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UCheckbox).default.size,
+  },
+
+  /**
+   * Make checkbox disabled.
+   */
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UCheckbox).default.disabled,
+  },
+
+  /**
+   * Make checkbox partially checked (change the checked tick to a minus).
+   */
+  partial: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UCheckbox).default.partial,
+  },
+
+  /**
+   * Generates unique element id.
+   * @ignore
+   */
+  id: {
+    type: String,
+    default: () => getRandomId(),
+  },
+
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "input"]);
+
+const checkboxName = ref("");
+
+const { config, checkboxAttrs, iconWrapperCellAttrs, labelAttrs, iconAttrs } = useAttrs(props);
+
+const iconName = computed(() => {
+  return props.partial ? config.value.partialIconName : config.value.selectedIconName;
+});
+
+const iconSize = computed(() => {
+  const sizes = {
+    sm: "xs",
+    md: "sm",
+    lg: "md",
+  };
+
+  return sizes[props.size];
+});
+
+const isBinary = computed(() => !Array.isArray(props.modelValue));
+const isCheckboxInGroup = computed(() => Boolean(checkboxGroupName));
+
+const isChecked = computed(() => {
+  return isBinary.value && !isCheckboxInGroup.value
+    ? isEqual(props.modelValue, props.trueValue)
+    : currentValue.value.findIndex((item) => isEqual(item, checkboxValue.value)) !== -1;
+});
+
+const checkboxValue = computed(() => {
+  return props.value === "" ? "on" : props.value;
+});
+
+const currentValue = computed(() => {
+  return isCheckboxInGroup.value ? checkboxGroupCheckedItems.value : props.modelValue;
+});
+
+onMounted(() => {
+  checkboxName.value = isCheckboxInGroup.value ? checkboxGroupName : props.name;
+});
+
+function onChange() {
+  let newModelValue;
+
+  if (isBinary.value) {
+    newModelValue = isChecked.value ? props.falseValue : props.trueValue;
+  }
+
+  if (!isBinary.value || isCheckboxInGroup.value) {
+    newModelValue = !isChecked.value
+      ? [...currentValue.value, checkboxValue.value]
+      : currentValue.value.filter((item) => !isEqual(checkboxValue.value, item));
+  }
+
+  if (isCheckboxInGroup.value && setCheckboxGroupCheckedItems) {
+    setCheckboxGroupCheckedItems(newModelValue);
+  }
+
+  emit("update:modelValue", newModelValue);
+  emit("input", newModelValue);
+}
+</script>

package/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/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/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/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/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" };