vueless 0.0.9 → 0.0.10

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

@@ -1,145 +0,0 @@
-<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 ULabel from "../ui.form-label";
-import UCheckbox from "../ui.form-checkbox";
-
-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

@@ -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-multi-state/composables/attrs.composable.js

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

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

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

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

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

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

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

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

@@ -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 UColorPicker = "UColorPicker";

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

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