vueless 0.0.4 → 0.0.6

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

package/src/ui.form-checkbox-group/index.vue

@@ -0,0 +1,145 @@
+<template>
+  <ULabel
+    :for="id"
+    :label="label"
+    :error="error"
+    align="topWithDesc"
+    :disabled="disabled"
+    :data-cy="dataCy"
+    v-bind="labelAttrs"
+  >
+    {{ option }}
+    <div v-bind="listAttrs">
+      <slot>
+        <UCheckbox
+          v-for="(option, index) in options"
+          :key="option.value"
+          :model-value="modelValue"
+          :value="option.value"
+          :true-value="option.trueValue"
+          :false-value="option.falseValue"
+          :label="option.label"
+          :description="option.description"
+          :disabled="disabled"
+          :data-cy="`${dataCy}-item-${index}`"
+          v-bind="checkboxAttrs"
+        />
+      </slot>
+    </div>
+  </ULabel>
+</template>
+
+<script setup>
+import { provide, ref, watch } from "vue";
+import { isEqual } from "lodash-es";
+
+import UIService, { getRandomId } from "../service.ui";
+
+import UCheckbox from "../ui.form-checkbox";
+import ULabel from "../ui.form-label";
+
+import { UCheckboxGroup } 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: "UCheckboxGroup", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Checkbox group label.
+   */
+  label: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Checkbox group value.
+   */
+  modelValue: {
+    type: Array,
+    default: () => [],
+  },
+
+  /**
+   * Checkbox group options.
+   */
+  options: {
+    type: Array,
+    default: () => [],
+  },
+
+  /**
+   * Error description.
+   */
+  error: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Name for each checkbox.
+   */
+  name: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Make checkbox disabled.
+   */
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UCheckboxGroup).default.disabled,
+  },
+
+  /**
+   * 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: "checkbox",
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const checkedItems = ref([]);
+
+const { labelAttrs, checkboxAttrs, listAttrs } = useAttrs(props);
+
+provide("setCheckboxGroupCheckedItems", (value) => (checkedItems.value = value));
+provide("checkboxGroupCheckedItems", checkedItems);
+provide("checkboxGroupName", props.name);
+
+watch(() => checkedItems.value.length, onChangeCheckedItems);
+watch(() => props.modelValue.length, onModelValueChange, { immediate: true });
+
+function onModelValueChange(newValue, oldValue) {
+  if (!isEqual(newValue, oldValue)) {
+    checkedItems.value = props.modelValue;
+  }
+}
+
+function onChangeCheckedItems() {
+  emit("update:modelValue", checkedItems.value);
+}
+</script>

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

@@ -0,0 +1,24 @@
+import useUI from "../../composable.ui";
+
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+
+export function useAttrs(props, { selected }) {
+  const { getAttrs } = useUI(defaultConfig, () => props.config);
+
+  const checkboxAttrsRaw = getAttrs("checkbox", { isComponent: true });
+
+  const checkboxAttrs = computed(() => {
+    if (!checkboxAttrsRaw.value.config) {
+      checkboxAttrsRaw.value.config = {};
+    }
+
+    checkboxAttrsRaw.value.config.selectedIconName = selected.value.icon;
+
+    return checkboxAttrsRaw.value;
+  });
+
+  return {
+    checkboxAttrs,
+  };
+}

package/src/ui.form-checkbox-multi-state/configs/default.config.js

@@ -0,0 +1,9 @@
+export default /*tw*/ {
+  checkbox: "",
+  defaultVariants: {
+    color: "brand",
+    size: "md",
+    placement: "left",
+    disabled: false,
+  },
+};

package/src/ui.form-checkbox-multi-state/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 UCheckboxMultiState = "UCheckboxMultiState";

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

@@ -0,0 +1,59 @@
+import { getArgTypes } from "../service.storybook";
+
+import UCheckboxMultiState from "../ui.form-checkbox-multi-state";
+import URow from "../ui.container-row";
+
+export default {
+  id: "3120",
+  title: "Form Inputs & Controls / Checkbox Multistate",
+  component: UCheckboxMultiState,
+  args: {
+    modelValue: false,
+    options: [
+      { value: false, label: "empty", icon: "", description: "checkbox empty" },
+      { value: true, label: "selected", icon: "check", description: "checkbox selected" },
+      { value: null, label: "not selected", icon: "remove", description: "checkbox unselected" },
+    ],
+  },
+  argTypes: {
+    ...getArgTypes(UCheckboxMultiState.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UCheckboxMultiState },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UCheckboxMultiState v-bind="args" v-model="args.value" />
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { UCheckboxMultiState, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <URow>
+      <UCheckboxMultiState
+        v-for="(size, index) in sizes"
+        v-bind="args"
+        :size="size"
+        v-model="args.value"
+        :label="size"
+        :key="index"
+      />
+    </URow>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const sizes = SizesTemplate.bind({});
+sizes.args = {};

package/src/ui.form-checkbox-multi-state/index.vue

@@ -0,0 +1,134 @@
+<template>
+  <UCheckbox
+    :model-value="isChecked"
+    :label="selected.label"
+    :description="selected.description"
+    :name="name"
+    :size="size"
+    :color="color"
+    :placement="placement"
+    v-bind="checkboxAttrs"
+    @click.self="onClickCheckbox"
+  />
+</template>
+
+<script setup>
+import { computed, ref, watchEffect } from "vue";
+
+import UIService from "../service.ui";
+import UCheckbox from "../ui.form-checkbox";
+
+import defaultConfig from "./configs/default.config";
+import { UCheckboxMultiState } from "./constants";
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UCheckboxMultiState", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Checkbox value.
+   */
+  modelValue: {
+    type: [Boolean, String, Number],
+    default: "",
+  },
+
+  /**
+   * Checkbox state options.
+   */
+  options: {
+    type: Array,
+    default: () => [{ value: "", icon: "", label: "", description: "" }],
+  },
+
+  /**
+   * Checkbox name.
+   */
+  name: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Checkbox size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UCheckboxMultiState).default.size,
+  },
+
+  /**
+   * 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, UCheckboxMultiState).default.color,
+  },
+
+  /**
+   * Label placement.
+   * @values left, right
+   */
+  placement: {
+    type: String,
+    default: UIService.get(defaultConfig, UCheckboxMultiState).default.placement,
+  },
+
+  /**
+   * Make checkbox disabled.
+   */
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UCheckboxMultiState).default.disabled,
+  },
+
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const index = ref(0);
+const isChecked = ref(false);
+
+const selected = computed(() => props.options[index.value]);
+
+const { checkboxAttrs } = useAttrs(props, { selected });
+
+watchEffect(setIndex);
+
+function setIndex() {
+  const optionIndex = props.options.findIndex((item) => item.value === props.modelValue);
+
+  index.value = ~optionIndex ? optionIndex : index.value;
+
+  setChecked();
+}
+
+function setChecked() {
+  setTimeout(() => (isChecked.value = !!props.options[index.value].icon), 0);
+}
+
+function onClickCheckbox() {
+  index.value++;
+  index.value = index.value < props.options.length ? index.value : 0;
+
+  emit("update:modelValue", selected.value.value);
+}
+</script>

package/src/ui.form-color-picker/composables/attrs.composable.js

@@ -0,0 +1,44 @@
+import useUI from "../../composable.ui";
+
+import defaultConfig from "../configs/default.config";
+import { cva } from "../../service.ui";
+import { computed } from "vue";
+
+export function useAttrs(props) {
+  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { radio } = config.value;
+
+  const cvaRadio = cva({
+    base: radio.base,
+    variants: radio.variants,
+    compoundVariants: radio.compoundVariants,
+  });
+
+  const radioClasses = computed(() =>
+    setColor(
+      cvaRadio({
+        color: props.color,
+      }),
+      props.color,
+    ),
+  );
+
+  const wrapperAttrs = getAttrs("wrapper");
+  const listAttrs = getAttrs("listAttrs");
+  const labelAttrs = getAttrs("label");
+  const radioAttrs = getAttrs("radio", { classes: radioClasses, isComponent: true });
+  const iconAttrs = getAttrs("icon");
+  const uncoloredAttrs = getAttrs("uncolored", { isComponent: true });
+  const uncoloredRadioAttrs = getAttrs("uncoloredRadio", { isComponent: true });
+
+  return {
+    config,
+    wrapperAttrs,
+    listAttrs,
+    labelAttrs,
+    radioAttrs,
+    iconAttrs,
+    uncoloredAttrs,
+    uncoloredRadioAttrs,
+  };
+}

package/src/ui.form-color-picker/configs/default.config.js

@@ -0,0 +1,52 @@
+export default /*tw*/ {
+  wrapper: "",
+  listAttrs: "mt-4 gap-4 flex flex-wrap",
+  label: "",
+  radio: {
+    base: "size-6 cursor-pointer ",
+    radio: {
+      base: "bg-{color}-500",
+    },
+  },
+  icon: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
+  iconName: "close",
+  uncolored: "relative flex",
+  uncoloredRadio: {
+    base: "size-6",
+    radio: {
+      compoundVariants: [
+        {
+          color: "grayscale",
+          class: `
+          text-white
+          checked:border-gray-300
+        `,
+        },
+      ],
+    },
+  },
+  defaultVariants: {
+    colorOptions: [
+      "red",
+      "orange",
+      "amber",
+      "yellow",
+      "lime",
+      "green",
+      "emerald",
+      "teal",
+      "cyan",
+      "sky",
+      "blue",
+      "indigo",
+      "violet",
+      "purple",
+      "fuchsia",
+      "pink",
+      "rose",
+    ],
+    disabled: false,
+    size: "md",
+  },
+  safelist: (colors) => [{ pattern: `bg-(${colors})-500` }],
+};

package/src/ui.form-color-picker/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 UColorPicker = "UColorPicker";

package/src/ui.form-color-picker/index.stories.js

@@ -0,0 +1,63 @@
+import { getArgTypes } from "../service.storybook";
+import UColorPicker from "../ui.form-color-picker";
+import UGroup from "../ui.container-group";
+
+export default {
+  id: "3210",
+  title: "Form Inputs & Controls / Color Picker",
+  component: UColorPicker,
+  args: {
+    label: "Label",
+    value: "red",
+  },
+  argTypes: {
+    ...getArgTypes(UColorPicker.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UColorPicker },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UColorPicker v-bind="args" v-model="args.value"/>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { UGroup, UColorPicker },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <UGroup>
+      <UColorPicker
+        v-for="(size, index) in sizes"
+        v-bind="args"
+        :size="size"
+        :key="index"
+        :name="size"
+        v-model="args.value"
+      />
+    </UGroup>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const Sizes = SizesTemplate.bind({});
+Sizes.args = {};
+
+export const Description = DefaultTemplate.bind({});
+Description.args = { description: "Description" };
+
+export const Error = DefaultTemplate.bind({});
+Error.args = { error: "some error" };
+
+export const Disabled = DefaultTemplate.bind({});
+Disabled.args = { disabled: true };