vueless 0.0.8 → 0.0.10

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

@@ -1,57 +0,0 @@
-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/src/ui.form-checkbox/configs/default.config.js

@@ -1,69 +0,0 @@
-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/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 UCheckbox = "UCheckbox";

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

@@ -1,147 +0,0 @@
-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/index.vue

@@ -1,242 +0,0 @@
-<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/src/ui.form-checkbox-group/Docs.mdx

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

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

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

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

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

@@ -1,45 +0,0 @@
-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" };