vueless 0.0.2 → 0.0.3

package/ui.button-toggle/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.button-toggle/composables/attrs.composable.js

@@ -0,0 +1,16 @@
+import useUI from "vueless/composable.ui";
+
+import defaultConfig from "../configs/default.config";
+
+export function useAttrs(props) {
+  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+
+  const wrapperAttrs = getAttrs("wrapper");
+  const toggleItemAttrs = getAttrs("toggleItem", { isComponent: true });
+
+  return {
+    config,
+    wrapperAttrs,
+    toggleItemAttrs,
+  };
+}

package/ui.button-toggle/configs/default.config.js

@@ -0,0 +1,12 @@
+export default /*tw*/ {
+  wrapper: `
+    flex gap-px
+    [&>*:first-child]:rounded-l-lg [&>*:first-child]:rounded-r-none [&>*:first-child]:overflow-hidden
+    [&>*:last-child]:rounded-r-lg [&>*:last-child]:rounded-l-none [&>*:last-child]:overflow-hidden
+  `,
+  defaultVariants: {
+    size: "md",
+    block: false,
+    multiple: false,
+  },
+};

package/ui.button-toggle/constants/index.js

@@ -0,0 +1,7 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const UToggle = "UToggle";
+export const TYPE_RADIO = "radio";
+export const TYPE_CHECKBOX = "checkbox";

package/{ui.button-group → ui.button-toggle}/index.stories.js

@@ -1,20 +1,53 @@
 import { getArgTypes, getSlotNames } from "vueless/service.storybook";
 
-import UButtonGroup from "vueless/ui.button-group";
+import UToggle from "vueless/ui.button-toggle";
 import UIcon from "vueless/ui.image-icon";
-import UButtonGroupItem from "vueless/ui.button-group-item";
+import UToggleItem from "vueless/ui.button-toggle-item";
 import URow from "vueless/ui.container-row";
+
 export default {
-  title: "Buttons & Links / Button Group",
-  component: UButtonGroup,
+  title: "Buttons & Links / Toggle",
+  component: UToggle,
   argTypes: {
-    ...getArgTypes(UButtonGroup.name),
+    ...getArgTypes(UToggle.name),
     modelValue: { control: { type: "text" } },
   },
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UButtonGroup },
+  components: { UToggle },
+  data() {
+    return {
+      value: "",
+    };
+  },
+  setup() {
+    const groupOptions = [
+      { value: "11", label: "label 1" },
+      { value: "12", label: "label 2" },
+      { value: "13", label: "label 3" },
+      { value: "14", label: "label 4" },
+    ];
+
+    return { args, groupOptions };
+  },
+  template: `
+    <UToggle
+      v-model="value"
+      v-bind="args"
+      :options="groupOptions"
+      name="defaultTemplate"
+    />
+  `,
+});
+
+const checkboxTemplate = (args) => ({
+  components: { UToggle },
+  data() {
+    return {
+      value: [],
+    };
+  },
   setup() {
     const groupOptions = [
       { value: "11", label: "label 1" },
@@ -26,14 +59,25 @@ const DefaultTemplate = (args) => ({
     return { args, groupOptions };
   },
   template: `
-    <UButtonGroup :options="groupOptions" name="defaultTemplate" v-bind="args"/>
+    <UToggle
+      v-model="value"
+      v-bind="args"
+      multiple
+      :options="groupOptions"
+      name="defaultTemplate"
+    />
   `,
 });
 
-const SizesTemplate = (args, { argTypes }) => ({
-  components: { UButtonGroup, URow },
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { UToggle, URow },
+  data() {
+    return {
+      value: "",
+    };
+  },
   setup() {
-    const slots = getSlotNames(UButtonGroup.name);
+    const slots = getSlotNames(UToggle.name);
 
     return {
       args,
@@ -43,28 +87,29 @@ const SizesTemplate = (args, { argTypes }) => ({
   },
   template: `
     <URow>
-      <UButtonGroup
+      <UToggle
         v-for="(size, index) in sizes"
+        v-bind="args"
         :size="size"
-        :text="size"
+        :label="size"
         :options="[
           { value: size + 1, label: size },
           { value: size + 2, label: size },
         ]"
-        v-bind="args"
+        v-model="value"
         :key="index"
         name="sizeTemplate"
       >
         <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
           <template v-if="args[slot]">{{ args[slot] }}</template>
         </template>
-      </UButtonGroup>
+      </UToggle>
     </URow>
   `,
 });
 
 const SlotTemplate = (args) => ({
-  components: { UButtonGroup, UIcon, UButtonGroupItem },
+  components: { UToggle, UIcon, UToggleItem },
   setup() {
     return {
       args,
@@ -72,9 +117,9 @@ const SlotTemplate = (args) => ({
     };
   },
   template: `
-    <UButtonGroup v-model="selected">
+    <UToggle v-bind="args" name="slotTemplate" v-model="selected">
       ${args.slotTemplate}
-    </UButtonGroup>
+    </UToggle>
   `,
 });
 
@@ -83,22 +128,28 @@ Default.args = {
   name: "first name",
 };
 
+export const multiple = checkboxTemplate.bind({});
+multiple.args = {
+  name: "second name",
+};
+
+export const sizes = SizesTemplate.bind({});
+sizes.args = {
+  name: "four name",
+};
+
+export const block = DefaultTemplate.bind({});
+block.args = {
+  name: "five name",
+  block: true,
+};
+
 export const slotDefault = SlotTemplate.bind({});
 slotDefault.args = {
   name: "third name",
   slotTemplate: `
     <template #default>
-      <UButtonGroupItem label="label" />
+      <UToggleItem label="label" />
     </template>
   `,
 };
-
-export const sizes = SizesTemplate.bind({});
-sizes.args = {
-  name: "second name",
-};
-
-export const wide = DefaultTemplate.bind({});
-wide.args = {
-  wide: true,
-};

package/ui.button-toggle/index.vue

@@ -0,0 +1,128 @@
+<template>
+  <div ref="wrapperRef" :data-cy="dataCy" v-bind="wrapperAttrs">
+    <slot>
+      <UToggleItem
+        v-for="(item, index) in options"
+        :key="item.value"
+        :model-value="item.value"
+        :value="item.value"
+        :label="item.label"
+        :data-cy="`${dataCy}-item-${index}`"
+        v-bind="toggleItemAttrs"
+      />
+    </slot>
+  </div>
+</template>
+
+<script setup>
+import { computed, provide, readonly, ref } from "vue";
+
+import UIService from "vueless/service.ui";
+
+import defaultConfig from "./configs/default.config";
+import { UToggle, TYPE_RADIO, TYPE_CHECKBOX } from "./constants";
+import { useAttrs } from "./composables/attrs.composable";
+import { UButton } from "vueless/ui.button/constants/index.js";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UToggle", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Set buttons name.
+   */
+  name: {
+    type: String,
+    required: true,
+  },
+
+  /**
+   * Set data for buttons.
+   */
+  options: {
+    type: Array,
+    default: () => [],
+  },
+
+  /**
+   * Set current value.
+   */
+  modelValue: {
+    type: [String, Number, Array],
+    default: () => (!this.multiple ? "" : []),
+  },
+
+  /**
+   * Allow to select a few options and return them as array.
+   */
+  multiple: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UToggle).default.multiple,
+  },
+
+  /**
+   * The size of the buttons.
+   * @values xs, sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UToggle).default.size,
+  },
+
+  /**
+   * Make the toggle fill the width with its container.
+   */
+  block: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UButton).default.block,
+  },
+
+  /**
+   * Sets data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const { wrapperAttrs, toggleItemAttrs } = useAttrs(props);
+
+const wrapperRef = ref();
+
+const selectedValue = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+});
+
+const type = computed(() => (props.multiple ? TYPE_CHECKBOX : TYPE_RADIO));
+
+function updateSelectedValue(value, checked) {
+  if (type.value === TYPE_RADIO) {
+    selectedValue.value = value;
+
+    return;
+  }
+
+  if (!checked) {
+    selectedValue.value = selectedValue.value.filter((item) => item !== value);
+  } else {
+    selectedValue.value.push(value);
+  }
+}
+
+provide("toggleName", () => props.name);
+
+provide("toggleSize", () => props.size);
+
+provide("toggleBlock", () => props.block);
+
+provide("toggleType", readonly(type));
+
+provide("toggleSelectedValue", {
+  selectedValue: readonly(selectedValue),
+  updateSelectedValue,
+});
+</script>

package/ui.button-toggle-item/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.button-toggle-item/composables/attrs.composable.js

@@ -0,0 +1,53 @@
+import { computed, toValue } from "vue";
+import useUI from "vueless/composable.ui";
+import { cva } from "vueless/service.ui";
+
+import defaultConfig from "../configs/default.config";
+
+export function useAttrs(props, { size, block }) {
+  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { label, labelText, wrapper } = config.value;
+
+  const cvaWrapper = cva({
+    base: wrapper.base,
+    variants: wrapper.variants,
+    compoundVariants: wrapper.compoundVariants,
+  });
+
+  const cvaLabelText = cva({
+    base: labelText.base,
+    variants: labelText.variants,
+    compoundVariants: labelText.compoundVariants,
+  });
+
+  const cvaLabel = cva({
+    base: label.base,
+    variants: label.variants,
+    compoundVariants: label.compoundVariants,
+  });
+
+  const wrapperClasses = computed(() => cvaWrapper({ block: toValue(block) }));
+
+  const labelTextClasses = computed(() => cvaLabelText({ size: toValue(size) }));
+
+  const labelClasses = computed(() =>
+    cvaLabel({
+      size: toValue(size),
+      variant: props.variant,
+      disabled: props.disabled,
+    }),
+  );
+
+  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
+  const inputAttrs = getAttrs("input");
+  const labelAttrs = getAttrs("label", { classes: labelClasses });
+  const labelTextAttrs = getAttrs("labelText", { classes: labelTextClasses });
+
+  return {
+    inputAttrs,
+    wrapperAttrs,
+    labelTextAttrs,
+    labelAttrs,
+    hasSlotContent,
+  };
+}

package/ui.button-toggle-item/configs/default.config.js

@@ -0,0 +1,58 @@
+export default /*tw*/ {
+  wrapper: {
+    base: "w-fit",
+    variants: {
+      block: {
+        true: "w-full",
+      },
+    },
+  },
+  input: "p-0 m-0 size-0 invisible peer absolute",
+  label: {
+    base: "font-medium w-full flex items-center justify-center cursor-pointer",
+    variants: {
+      variant: {
+        primary: `
+          bg-gray-900/5 hover:bg-gray-900/10 active:bg-gray-900/15
+          peer-focus:border-gray-100 peer-focus:bg-opacity-10 peer-focus:ring-4 peer-focus:ring-gray-600/15
+          focus:border-gray-100 focus:bg-opacity-10 focus:ring-4 focus:ring-gray-600/15
+          peer-checked:bg-gray-900/15
+        `,
+        secondary: `
+          bg-transparent border hover:text-opacity-80 hover:border-opacity-80
+          peer-focus:text-opacity-100 peer-focus:border-opacity-100
+          focus:text-opacity-100 focus:border-opacity-100
+          peer-checked:text-opacity-100 peer-checked:border-opacity-100
+        `,
+        thirdary: `
+          bg-transparent opacity-50 border-none hover:border-none hover:opacity-100 hover:ring-0
+          peer-focus:border-none peer-focus:bg-gray-100 peer-focus:bg-opacity-10 peer-focus:opacity-100
+          peer-focus:ring-0 peer-checked:bg-transparent peer-checked:opacity-100
+          focus:border-none focus:bg-gray-100 focus:bg-opacity-10 focus:opacity-100 focus:ring-0
+        `,
+      },
+      size: {
+        sm: "gap-1.5 p-3.5",
+        md: "p-[1.125rem] gap-2",
+        lg: "gap-2.5 p-[1.375rem]",
+      },
+    },
+  },
+  labelText: {
+    base: "font-medium text-center w-full",
+    variants: {
+      size: {
+        sm: "text-sm",
+        md: "font-base",
+        lg: "text-lg",
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "primary",
+    type: "radio",
+    size: "md",
+    block: false,
+    disabled: false,
+  },
+};

package/ui.button-toggle-item/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 UToggleItem = "UToggleItem";

package/{ui.button-group-item → ui.button-toggle-item}/index.stories.js

@@ -1,59 +1,62 @@
 import { getArgTypes, getSlotNames } from "vueless/service.storybook";
 
-import UButtonGroupItem from "vueless/ui.button-group-item";
+import UToggleItem from "vueless/ui.button-toggle-item";
 import UIcon from "vueless/ui.image-icon";
 
 export default {
-  title: "Buttons & Links / Button Group Item",
-  component: UButtonGroupItem,
+  title: "Buttons & Links / Toggle Item",
+  component: UToggleItem,
   args: {
     value: "1",
     label: "Label",
   },
   argTypes: {
-    ...getArgTypes(UButtonGroupItem.name),
+    ...getArgTypes(UToggleItem.name),
     value: { control: { type: "text" } },
   },
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UButtonGroupItem },
+  components: { UToggleItem },
   setup() {
-    const slots = getSlotNames(UButtonGroupItem.name);
+    const slots = getSlotNames(UToggleItem.name);
 
     return { args, slots };
   },
   template: `
-    <UButtonGroupItem name="defaultTemplate" v-bind="args">
+    <UToggleItem v-bind="args" name="toggle">
       <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
         <template v-if="args[slot]">{{ args[slot] }}</template>
       </template>
-    </UButtonGroupItem>
+    </UToggleItem>
   `,
 });
 
 const SlotTemplate = (args) => ({
-  components: { UButtonGroupItem, UIcon },
+  components: { UToggleItem, UIcon },
   setup() {
     return { args };
   },
   template: `
-    <UButtonGroupItem label="Label" v-bind="args">
+    <UToggleItem v-bind="args" label="Label" >
       ${args.slotTemplate}
-    </UButtonGroupItem>
+    </UToggleItem>
   `,
 });
 
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const disabled = DefaultTemplate.bind({});
+disabled.args = { disabled: true };
+
 export const slotLeft = SlotTemplate.bind({});
 slotLeft.args = {
   slotTemplate: `
     <template #left>
       <UIcon
         name="star"
-        color="black"
+        color="green"
         size="md"
       />
     </template>
@@ -66,7 +69,7 @@ slotRight.args = {
     <template #right>
       <UIcon
         name="star"
-        color="black"
+        color="green"
         size="md"
        />
     </template>