vueless 0.0.2 → 0.0.3

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

@@ -1,15 +1,17 @@
 import { getArgTypes, getSlotNames } from "vueless/service.storybook";
 
 import UCheckbox from "vueless/ui.form-checkbox";
-import UIcon from "vueless/ui.image-icon";
-import URow from "vueless/ui.container-row";
+import UCheckboxGroup from "vueless/ui.form-checkbox-group";
+import UBadge from "vueless/ui.text-badge";
+import UGroup from "vueless/ui.container-group";
 
 export default {
+  id: "3100",
   title: "Form Inputs & Controls / Checkbox",
   component: UCheckbox,
   args: {
     label: "Label",
-    modelValue: "",
+    value: {},
   },
   argTypes: {
     ...getArgTypes(UCheckbox.name),
@@ -32,8 +34,62 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const SizesTemplate = (args, { argTypes }) => ({
-  components: { UCheckbox, URow },
+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,
@@ -41,25 +97,26 @@ const SizesTemplate = (args, { argTypes }) => ({
     };
   },
   template: `
-    <URow>
+    <UGroup size="lg">
       <UCheckbox
         v-for="(size, index) in sizes"
-        :size="size"
-        :label="size"
         :key="index"
         v-bind="args"
+        v-model="args.value[size]"
+        :size="size"
+        :label="size"
       />
-    </URow>
+    </UGroup>
   `,
 });
 
 const SlotTemplate = (args) => ({
-  components: { UCheckbox, UIcon },
+  components: { UCheckbox, UBadge },
   setup() {
     return { args };
   },
   template: `
-    <UCheckbox v-bind="args">
+    <UCheckbox v-bind="args" v-model="args.value" description="hello">
       ${args.slotTemplate}
     </UCheckbox>
   `,
@@ -68,6 +125,9 @@ const SlotTemplate = (args) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const CustomValues = ValueTypesTemplate.bind({});
+CustomValues.args = {};
+
 export const Sizes = SizesTemplate.bind({});
 Sizes.args = {};
 
@@ -77,22 +137,11 @@ Disabled.args = { disabled: true };
 export const Description = DefaultTemplate.bind({});
 Description.args = { description: "Some description" };
 
-export const slotDescription = SlotTemplate.bind({});
-slotDescription.args = {
+export const slotFooter = SlotTemplate.bind({});
+slotFooter.args = {
   slotTemplate: `
-    <template #description>
-    <div class="flex">
-      <div>
-        Hello
-      </div>
-
-      <UIcon
-        name="star"
-        color="black"
-        size="md"
-      />
-    </div>
-
+    <template #footer>
+      <UBadge label="favourite" color="green" size="sm" />
     </template>
   `,
 };

package/ui.form-checkbox/index.vue

@@ -1,301 +1,241 @@
 <template>
-  <label ref="inputCheckbox" class="mono-checkbox-wrapper">
-    <t-checkbox
-      v-model="selected"
-      class="mono-checkbox"
-      :class="checkboxSizeClass"
-      :disabled="disabled"
-      :value="values.select"
-      :unchecked-value="values.unselect"
+  <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"
-      :data-cy="dataCy"
+      :checked="isChecked"
+      :disabled="disabled"
+      v-bind="checkboxAttrs"
+      @change="onChange"
     />
 
-    <UIcon
-      v-if="isShownPartialIcon"
-      name="remove"
-      :size="size"
-      class="mono-checkbox-partial-icon"
-      color="white"
-    />
+    <label v-if="isChecked" v-bind="iconWrapperCellAttrs" :for="id">
+      <UIcon :name="iconName" :size="iconSize" color="white" v-bind="iconAttrs" />
+    </label>
 
-    <div>
-      <span v-if="label" class="label">
-        {{ label }}
-      </span>
-
-      <!-- @slot Use it to add some description. -->
-      <div v-if="isShownDescription" class="mono-checkbox-description">
-        <slot name="description" :description="description">
-          <span>{{ description }}</span>
-        </slot>
-      </div>
-    </div>
-  </label>
+    <template #footer>
+      <slot name="footer" />
+    </template>
+  </ULabel>
 </template>
 
-<script>
-import TCheckbox from "vueless/library.vue-tailwind-3/t-checkbox";
+<script setup>
+import { inject, ref, onMounted, computed } from "vue";
+import isEqual from "lodash.isequal";
+
+import UIService, { getRandomId } from "vueless/service.ui";
+
+import defaultConfig from "./configs/default.config";
+import { UCheckbox } from "./constants";
+
 import UIcon from "vueless/ui.image-icon";
+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,
+  },
 
-export default {
-  name: "UCheckbox",
+  /**
+   * Native value attribute.
+   */
+  value: {
+    type: [Boolean, String, Number, Array, Object],
+    default: "",
+  },
 
-  components: { UIcon, TCheckbox },
+  /**
+   * Own value for checkbox checked state.
+   */
+  trueValue: {
+    type: [Boolean, String, Number, Array, Object],
+    default: true,
+  },
 
-  inject: {
-    setCheckboxGroupSelectedItems: { default: null },
-    getCheckboxGroupSelectedItems: { default: null },
-    getCheckboxGroupName: { default: null },
+  /**
+   * Own value for checkbox unchecked state.
+   */
+  falseValue: {
+    type: [Boolean, String, Number, Array, Object],
+    default: false,
   },
 
-  props: {
-    /**
-     * Set checkbox value.
-     */
-    modelValue: {
-      type: [Boolean, String, Number],
-      default: false,
-    },
-
-    /**
-     * Set own values for checkbox states (selected | unselected).
-     */
-    values: {
-      type: Object,
-      default: () => ({
-        select: true,
-        unselect: false,
-      }),
-    },
-
-    /**
-     * Set checkbox label.
-     */
-    label: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set checkbox size.
-     * @values sm, md, lg
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * Set description.
-     */
-    description: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Make checkbox inactive.
-     */
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Make checkbox partially selected (change the selected tick to a minus).
-     */
-    partial: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Set the name for checkbox.
-     */
-    name: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
+  /**
+   * Checkbox name.
+   */
+  name: {
+    type: String,
+    default: "",
   },
 
-  emits: ["update:modelValue", "input"],
+  /**
+   * Checkbox label.
+   */
+  label: {
+    type: String,
+    default: "",
+  },
 
-  data() {
-    return {
-      checkboxName: "",
-    };
+  /**
+   * Checkbox label description.
+   */
+  description: {
+    type: String,
+    default: "",
   },
 
-  computed: {
-    selected: {
-      get() {
-        const { select, unselect } = this.values;
-
-        return this.modelValue === select ? select : unselect;
-      },
-      set(value) {
-        if (this.isCheckboxInGroup) {
-          const selectedItems = this.getCheckboxGroupSelectedItems();
-
-          if (!value) {
-            const checkboxIndex = selectedItems.findIndex((item) => item === this.values.select);
-
-            selectedItems.splice(checkboxIndex, 1);
-          } else {
-            selectedItems.push(value);
-          }
-
-          this.setCheckboxGroupSelectedItems(selectedItems);
-        } else {
-          this.$emit("update:modelValue", value);
-          this.$emit("input", value);
-        }
-      },
-    },
-
-    isCheckboxInGroup() {
-      return !!this.getCheckboxGroupName;
-    },
-
-    isShownDescription() {
-      return this.description || !!this.$slots["description"];
-    },
-
-    checkboxSizeClass() {
-      return {
-        "size-sm": this.size === "sm",
-        "size-md": this.size === "md",
-        "size-lg": this.size === "lg",
-        "mono-checkbox-with-label": !!this.label,
-      };
-    },
-
-    isShownPartialIcon() {
-      const { select } = this.values;
-
-      return this.partial && this.selected === select;
-    },
+  /**
+   * Label placement.
+   * @values left, right
+   */
+  labelAlign: {
+    type: String,
+    default: UIService.get(defaultConfig, UCheckbox).default.labelAlign,
   },
 
-  mounted() {
-    this.checkboxName = this.isCheckboxInGroup ? this.getCheckboxGroupName() : this.name;
+  /**
+   * 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,
   },
-};
-</script>
 
-<style lang="postcss" scoped>
-.mono-checkbox-wrapper {
-  @apply flex max-w-max items-center;
-  @apply relative;
+  /**
+   * Checkbox size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UCheckbox).default.size,
+  },
 
-  .mono-checkbox {
-    @apply border border-solid border-gray-300;
+  /**
+   * Make checkbox disabled.
+   */
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UCheckbox).default.disabled,
+  },
 
-    &-with-label {
-      @apply mr-4;
-    }
+  /**
+   * Make checkbox partially checked (change the checked tick to a minus).
+   */
+  partial: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UCheckbox).default.partial,
+  },
 
-    &:disabled {
-      @apply border-gray-100 bg-gray-100;
-    }
+  /**
+   * Generates unique element id.
+   * @ignore
+   */
+  id: {
+    type: String,
+    default: () => getRandomId(),
+  },
 
-    &:hover {
-      @apply border-gray-400;
-    }
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
 
-    &:focus {
-      @apply border-gray-500 ring-4 ring-gray-200;
-    }
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
 
-    &:active {
-      @apply border-gray-900 bg-gray-900;
-    }
+const emit = defineEmits(["update:modelValue", "input"]);
 
-    &:checked {
-      @apply border-gray-900 bg-gray-900;
-    }
+const checkboxName = ref("");
 
-    &-partial-icon {
-      @apply absolute rounded bg-gray-900;
-    }
+const { config, checkboxAttrs, iconWrapperCellAttrs, labelAttrs, iconAttrs } = useAttrs(props);
 
-    &-description {
-      @apply text-xs font-normal text-gray-500/[85];
-      @apply pt-1;
-    }
-  }
+const iconName = computed(() => {
+  return props.partial ? config.value.partialIconName : config.value.selectedIconName;
+});
 
-  .label {
-    @apply text-base font-normal text-gray-900;
-  }
-}
+const iconSize = computed(() => {
+  const sizes = {
+    sm: "xs",
+    md: "sm",
+    lg: "md",
+  };
 
-.size {
-  &-sm {
-    @apply h-5 w-5;
+  return sizes[props.size];
+});
 
-    & + .label {
-      @apply text-sm;
-    }
-  }
+const isBinary = computed(() => !Array.isArray(props.modelValue));
+const isCheckboxInGroup = computed(() => Boolean(checkboxGroupName));
 
-  &-md {
-    @apply h-6 w-6;
-  }
+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;
+});
 
-  &-lg {
-    @apply h-7 w-7;
+onMounted(() => {
+  checkboxName.value = isCheckboxInGroup.value ? checkboxGroupName : props.name;
+});
 
-    & + .label {
-      @apply text-lg;
-    }
+function onChange() {
+  let newModelValue;
+
+  if (isBinary.value) {
+    newModelValue = isChecked.value ? props.falseValue : props.trueValue;
   }
-}
-</style>
-
-<!-- Brand theme -->
-<style scoped lang="postcss">
-.brand-theme {
-  &.mono-checkbox-wrapper {
-    .mono-checkbox {
-      @apply border border-solid border-gray-300;
-
-      &:disabled {
-        @apply bg-brand bg-opacity-10;
-        @apply border-brand border-opacity-10;
-      }
-
-      &:hover {
-        @apply border-brand border-opacity-40;
-      }
-
-      &:focus {
-        @apply border-brand border-opacity-50;
-        @apply ring-4 ring-brand ring-opacity-15;
-      }
-
-      &:active {
-        @apply border-brand bg-brand;
-      }
-
-      &:checked {
-        @apply border-brand bg-brand;
-      }
-    }
-
-    .label {
-      @apply text-sm font-normal text-gray-900;
-      @apply ml-4;
-    }
+
+  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);
 }
-</style>
+</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 "vueless/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 "vueless/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: "",
+};