vueless 0.0.1 → 0.0.3

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

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

@@ -3,6 +3,7 @@ import { getArgTypes } from "vueless/service.storybook";
 import UCheckboxGroup from "vueless/ui.form-checkbox-group";
 
 export default {
+  id: "3110",
   title: "Form Inputs & Controls / Checkbox Group",
   component: UCheckboxGroup,
   args: {
@@ -24,8 +25,13 @@ const DefaultTemplate = (args) => ({
   setup() {
     return { args };
   },
+  data() {
+    return {
+      test: ["1"],
+    };
+  },
   template: `
-    <UCheckboxGroup v-bind="args"/>
+    <UCheckboxGroup v-bind="args" name="default" v-model="test" />
   `,
 });
 

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

@@ -1,216 +1,143 @@
 <template>
-  <div ref="UCheckboxGroup" class="mono-checkbox-group" :data-cy="dataCy">
-    <h3 v-if="label" class="label-title" :class="titleClass">{{ label }}</h3>
-
-    <div class="mono-checkbox-group-block">
+  <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"
-          :data-cy="`${dataCy}-item-${index}`"
-          :disabled="disabled"
+          :model-value="modelValue"
+          :value="option.value"
+          :true-value="option.trueValue"
+          :false-value="option.falseValue"
           :label="option.label"
           :description="option.description"
-          :values="{
-            select: option.value,
-            unselect: false,
-          }"
+          :disabled="disabled"
+          :data-cy="`${dataCy}-item-${index}`"
+          v-bind="checkboxAttrs"
         />
       </slot>
     </div>
-
-    <p v-if="error" class="error-message" :data-cy="`${dataCy}-error-message`">
-      {{ error }}
-    </p>
-  </div>
+  </ULabel>
 </template>
 
-<script>
-import UCheckbox from "vueless/ui.form-checkbox";
-
-export default {
-  name: "UCheckboxGroup",
+<script setup>
+import { provide, ref, watch } from "vue";
+import isEqual from "lodash.isequal";
 
-  components: { UCheckbox },
+import UIService, { getRandomId } from "vueless/service.ui";
+import UCheckbox from "vueless/ui.form-checkbox";
 
-  provide() {
-    return {
-      setCheckboxGroupSelectedItems: (value) => {
-        this.selectedItems = value;
-      },
+import { UCheckboxGroup } from "./constants";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
 
-      getCheckboxGroupSelectedItems: () => {
-        return this.selectedItems;
-      },
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UCheckboxGroup", inheritAttrs: false });
 
-      getCheckboxGroupName: () => {
-        return this.name;
-      },
-    };
+const props = defineProps({
+  /**
+   * Checkbox group label.
+   */
+  label: {
+    type: String,
+    default: "",
   },
 
-  props: {
-    /**
-     * Set checkbox group label.
-     */
-    label: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set checkbox group value.
-     */
-    modelValue: {
-      type: Array,
-      default: () => [],
-    },
-
-    /**
-     * Set options for checkbox group.
-     */
-    options: {
-      type: Array,
-      default: () => [],
-    },
-
-    /**
-     * Make checkbox group inactive.
-     */
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Set error text.
-     */
-    error: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set the name for checkbox group for each checkbox.
-     */
-    name: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set test dataCy for a checkbox group.
-     */
-    dataCy: {
-      type: String,
-      default: "checkbox",
-    },
+  /**
+   * Checkbox group value.
+   */
+  modelValue: {
+    type: Array,
+    default: () => [],
   },
 
-  emits: ["update:modelValue"],
-
-  data: () => ({
-    selectedItems: [],
-  }),
-
-  computed: {
-    titleClass() {
-      return {
-        "error-title": this.error,
-      };
-    },
-
-    labelClass() {
-      return {
-        "label-separated": this.label,
-      };
-    },
+  /**
+   * Checkbox group options.
+   */
+  options: {
+    type: Array,
+    default: () => [],
   },
 
-  watch: {
-    selectedItems: {
-      handler: "onChangeSelectedItems",
-      deep: true,
-    },
+  /**
+   * Error description.
+   */
+  error: {
+    type: String,
+    default: "",
   },
 
-  methods: {
-    onChangeSelectedItems() {
-      this.$emit("update:modelValue", this.selectedItems);
-    },
+  /**
+   * Name for each checkbox.
+   */
+  name: {
+    type: String,
+    default: "",
   },
-};
-</script>
-
-<style lang="postcss" scoped>
-.label {
-  @apply block max-w-max;
-
-  &-separated {
-    @apply ml-4 mt-4;
-  }
-
-  &-title {
-    @apply text-sm font-normal text-gray-500;
-    @apply mb-6;
-  }
 
-  &-box {
-    @apply inline-flex;
-
-    &-inner {
-      @apply block;
-    }
-  }
-}
+  /**
+   * Make checkbox disabled.
+   */
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UCheckboxGroup).default.disabled,
+  },
 
-.mono-checkbox {
-  @apply border border-solid border-gray-300;
-  @apply h-6 w-6;
+  /**
+   * Generates unique element id.
+   * @ignore
+   */
+  id: {
+    type: String,
+    default: () => getRandomId(),
+  },
 
-  &:hover {
-    @apply border-gray-400;
-  }
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
 
-  &:active {
-    @apply border-gray-900 bg-gray-900;
-  }
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "checkbox",
+  },
+});
 
-  &:checked {
-    @apply border-gray-900 bg-gray-900;
-  }
+const emit = defineEmits(["update:modelValue"]);
 
-  &:focus {
-    @apply border-gray-500 ring-4 ring-gray-200;
-  }
+const checkedItems = ref([]);
 
-  &:disabled {
-    @apply border-gray-100 bg-gray-100;
-  }
+const { labelAttrs, checkboxAttrs, listAttrs } = useAttrs(props);
 
-  &-title {
-    @apply block cursor-pointer text-base font-medium text-gray-900;
-    @apply pl-4 pt-0.5;
-  }
+provide("setCheckboxGroupCheckedItems", (value) => (checkedItems.value = value));
+provide("checkboxGroupCheckedItems", checkedItems);
+provide("checkboxGroupName", props.name);
 
-  &-description {
-    @apply block text-xs font-normal text-gray-500/[85];
-    @apply pl-4 pt-1;
-  }
+watch(() => checkedItems.value.length, onChangeCheckedItems);
+watch(() => props.modelValue.length, onModelValueChange, { immediate: true });
 
-  &-group-block {
-    @apply ml-4 space-y-4;
+function onModelValueChange(newValue, oldValue) {
+  if (!isEqual(newValue, oldValue)) {
+    checkedItems.value = props.modelValue;
   }
 }
 
-.error {
-  &-title {
-    @apply text-red-500;
-  }
-
-  &-message {
-    @apply text-xs font-normal text-red-500;
-    @apply mt-2 pl-4;
-  }
+function onChangeCheckedItems() {
+  emit("update:modelValue", checkedItems.value);
 }
-</style>
+</script>

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

@@ -0,0 +1,24 @@
+import useUI from "vueless/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/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/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/ui.form-checkbox-multi-state/index.stories.js

@@ -4,15 +4,15 @@ import UCheckboxMultiState from "vueless/ui.form-checkbox-multi-state";
 import URow from "vueless/ui.container-row";
 
 export default {
+  id: "3120",
   title: "Form Inputs & Controls / Checkbox Multistate",
   component: UCheckboxMultiState,
   args: {
-    label: "Label",
-    value: false,
-    optionsData: [
-      { code: false, label: "checkbox 1" },
-      { code: true, label: "checkbox 2" },
-      { code: null, label: "checkbox 3" },
+    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: {
@@ -30,7 +30,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const SizesTemplate = (args, { argTypes }) => ({
+const SizesTemplate = (args, { argTypes } = {}) => ({
   components: { UCheckboxMultiState, URow },
   setup() {
     return {
@@ -42,11 +42,11 @@ const SizesTemplate = (args, { argTypes }) => ({
     <URow>
       <UCheckboxMultiState
         v-for="(size, index) in sizes"
+        v-bind="args"
         :size="size"
         v-model="args.value"
         :label="size"
         :key="index"
-        v-bind="args"
       />
     </URow>
   `,
@@ -57,6 +57,3 @@ Default.args = {};
 
 export const sizes = SizesTemplate.bind({});
 sizes.args = {};
-
-export const value = DefaultTemplate.bind({});
-value.args = { value: null };