vueless 0.0.2 → 0.0.3

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

@@ -1,244 +1,133 @@
 <template>
-  <div class="mono-checkbox-multistate-wrapper" @click="onClickChangeActiveOption">
-    <div class="mono-checkbox-multistate" :class="checkboxClasses">
-      <UIcon
-        v-if="selectedStateIcon"
-        :class="selectedStateIcon"
-        :name="selectedStateIcon"
-        :size="iconSize"
-        color="white"
-      />
-
-      <t-checkbox class="mono-checkbox-multistate-input" :value="selectedState" :data-cy="dataCy" />
-    </div>
-
-    <label v-if="selectedStateLabel" class="mono-checkbox-multistate-label">
-      {{ selectedStateLabel }}
-    </label>
-  </div>
+  <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>
-import UIcon from "vueless/ui.image-icon";
-import TCheckbox from "vueless/library.vue-tailwind-3/t-checkbox";
-
-export default {
-  name: "UCheckboxMultiState",
-
-  components: { UIcon, TCheckbox },
-
-  props: {
-    /**
-     * Set checkbox multi state value.
-     */
-    modelValue: {
-      type: [String, Boolean, Number],
-      default: "",
-    },
-
-    /**
-     * Set options data for component.
-     */
-    optionsData: {
-      type: Array,
-      default: () => [
-        { code: false, label: "" },
-        { code: true, label: "" },
-        { code: null, label: "" },
-      ],
-    },
-
-    /**
-     * Set component size.
-     * @values sm, md, lg
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
+<script setup>
+import { computed, ref, watchEffect } from "vue";
+
+import UIService from "vueless/service.ui";
+
+import defaultConfig from "./configs/default.config";
+import { UCheckboxMultiState } from "./constants";
+import { useAttrs } from "./composables/attrs.composable";
 
-  emits: ["update:modelValue"],
-
-  data: () => ({
-    index: 0,
-    selectedState: "",
-  }),
-
-  computed: {
-    options() {
-      const [unSelected, selectedFull, selectedPartially] = this.optionsData;
-
-      return [
-        {
-          selected: unSelected?.code,
-          label: unSelected?.label || "",
-        },
-        {
-          iconName: "check",
-          selected: selectedFull?.code,
-          label: selectedFull?.label || "",
-        },
-        {
-          iconName: "remove",
-          selected: selectedPartially?.code,
-          label: selectedPartially?.label || "",
-        },
-      ];
-    },
-
-    checkboxClasses() {
-      const checked = this.index > 0 ? "mono-checkbox-multistate-checked" : "";
-      const size = `size-${this.size}`;
-
-      return [checked, size];
-    },
-
-    selectedStateIcon() {
-      return this.options[this.index]?.iconName;
-    },
-
-    isCheck() {
-      return this.options[this.index]?.iconName === "check";
-    },
-
-    iconSize() {
-      const size = this.size;
-      const check = this.isCheck;
-      let iconSize;
-
-      if (!check && size === "lg") {
-        iconSize = "md";
-      } else if (check && size === "md") {
-        iconSize = "xs";
-      } else {
-        iconSize = "sm";
-      }
-
-      return iconSize;
-    },
-
-    selectedStateLabel() {
-      return this.options[this.index]?.label;
-    },
+/* 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: "",
   },
 
-  watch: {
-    value: {
-      handler: "onChangeValue",
-      immediate: true,
-    },
+  /**
+   * Checkbox state options.
+   */
+  options: {
+    type: Array,
+    default: () => [{ value: "", icon: "", label: "", description: "" }],
   },
 
-  methods: {
-    onClickChangeActiveOption() {
-      this.index += 1;
+  /**
+   * Checkbox name.
+   */
+  name: {
+    type: String,
+    default: "",
+  },
 
-      if (this.index >= this.options.length) {
-        this.index = 0;
-      }
+  /**
+   * Checkbox size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UCheckboxMultiState).default.size,
+  },
 
-      this.changeSelectedState();
-    },
+  /**
+   * 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,
+  },
 
-    onChangeValue() {
-      this.index = this.options.findIndex((item) => item.selected === this.modelValue);
-    },
+  /**
+   * Label placement.
+   * @values left, right
+   */
+  placement: {
+    type: String,
+    default: UIService.get(defaultConfig, UCheckboxMultiState).default.placement,
+  },
 
-    changeSelectedState() {
-      const activeOption = this.options[this.index];
+  /**
+   * Make checkbox disabled.
+   */
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UCheckboxMultiState).default.disabled,
+  },
 
-      this.selectedState = activeOption.selected;
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
 
-      this.$emit("update:modelValue", this.selectedState);
-    },
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
   },
-};
-</script>
+});
 
-<style lang="postcss" scoped>
-.mono-checkbox-multistate {
-  &-wrapper {
-    @apply flex;
-    @apply cursor-pointer;
-  }
-
-  @apply flex items-center justify-center;
-  @apply rounded border border-solid border-gray-300;
-  @apply bg-white;
-  @apply relative;
-
-  &:hover {
-    @apply border-gray-400;
-  }
-
-  &:focus-within {
-    @apply border-gray-500 ring-4 ring-gray-200;
-  }
-
-  &:active {
-    @apply border-gray-900 bg-gray-900;
-  }
-
-  &-input {
-    @apply opacity-0;
-    @apply absolute left-0 top-0;
-    @apply h-full w-full;
-    @apply cursor-pointer;
-  }
-
-  &-checked {
-    @apply border-gray-900 bg-gray-900;
-
-    &:hover {
-      @apply border-gray-900;
-    }
-  }
-
-  &-label {
-    @apply flex flex-col justify-center;
-    @apply text-base font-normal text-gray-900;
-    @apply pl-4;
-  }
-}
+const emit = defineEmits(["update:modelValue"]);
 
-.check {
-  &:deep(g) {
-    @apply stroke-white stroke-[1.75];
-  }
+const index = ref(0);
+const isChecked = ref(false);
 
-  &:deep(polygon) {
-    @apply hidden;
-  }
-}
+const selected = computed(() => props.options[index.value]);
 
-.size {
-  &-sm {
-    @apply h-5 w-5;
+const { checkboxAttrs } = useAttrs(props, { selected });
 
-    & + .multistate-checkbox-label {
-      @apply text-sm;
-    }
-  }
+watchEffect(setIndex);
 
-  &-md {
-    @apply h-6 w-6;
-  }
+function setIndex() {
+  const optionIndex = props.options.findIndex((item) => item.value === props.modelValue);
 
-  &-lg {
-    @apply h-7 w-7;
+  index.value = ~optionIndex ? optionIndex : index.value;
+
+  setChecked();
+}
 
-    & + .mono-checkbox-multistate-label {
-      @apply text-lg;
-    }
-  }
+function setChecked() {
+  setTimeout(() => (isChecked.value = !!props.options[index.value].icon), 0);
 }
-</style>
+
+function onClickCheckbox() {
+  index.value++;
+  index.value = index.value < props.options.length ? index.value : 0;
+
+  emit("update:modelValue", selected.value.value);
+}
+</script>

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

@@ -0,0 +1,44 @@
+import useUI from "vueless/composable.ui";
+
+import defaultConfig from "../configs/default.config";
+import { cva } from "vueless/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/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/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/ui.form-color-picker/index.stories.js

@@ -0,0 +1,63 @@
+import { getArgTypes } from "vueless/service.storybook";
+import UColorPicker from "vueless/ui.form-color-picker";
+import UGroup from "vueless/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 };