vueless 0.0.4 → 0.0.5

package/src/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 "../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 "../ui.button/constants";
+
+/* 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/src/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 "../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.button-toggle-item/composables/attrs.composable.js

@@ -0,0 +1,53 @@
+import { computed, toValue } from "vue";
+import useUI from "../../composable.ui";
+import { cva } from "../../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/src/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/src/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/src/ui.button-toggle-item/index.stories.js

@@ -0,0 +1,77 @@
+import { getArgTypes, getSlotNames } from "../service.storybook";
+
+import UToggleItem from "../ui.button-toggle-item";
+import UIcon from "../ui.image-icon";
+
+export default {
+  title: "Buttons & Links / Toggle Item",
+  component: UToggleItem,
+  args: {
+    value: "1",
+    label: "Label",
+  },
+  argTypes: {
+    ...getArgTypes(UToggleItem.name),
+    value: { control: { type: "text" } },
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UToggleItem },
+  setup() {
+    const slots = getSlotNames(UToggleItem.name);
+
+    return { args, slots };
+  },
+  template: `
+    <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>
+    </UToggleItem>
+  `,
+});
+
+const SlotTemplate = (args) => ({
+  components: { UToggleItem, UIcon },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UToggleItem v-bind="args" label="Label" >
+      ${args.slotTemplate}
+    </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="green"
+        size="md"
+      />
+    </template>
+  `,
+};
+
+export const slotRight = SlotTemplate.bind({});
+slotRight.args = {
+  slotTemplate: `
+    <template #right>
+      <UIcon
+        name="star"
+        color="green"
+        size="md"
+       />
+    </template>
+  `,
+};

package/src/ui.button-toggle-item/index.vue

@@ -0,0 +1,147 @@
+<template>
+  <div v-bind="wrapperAttrs">
+    <input
+      :id="id"
+      v-model="selectedItem"
+      :disabled="disabled"
+      :value="value"
+      :name="name"
+      :type="type"
+      v-bind="inputAttrs"
+    />
+    <label tabindex="0" :for="id" v-bind="labelAttrs" @click="onClickSetValue">
+      <span v-if="hasSlotContent($slots['left'])">
+        <!-- @slot Use it to add some content before label. -->
+        <slot name="left" />
+      </span>
+
+      <!-- @slot Use it to add some content instead of label. -->
+      <slot />
+      <span v-if="!hasSlotContent($slots['default'])" v-bind="labelTextAttrs" v-text="label" />
+
+      <span v-if="hasSlotContent($slots['right'])">
+        <!-- @slot Use it to add some content after label. -->
+        <slot name="right" />
+      </span>
+    </label>
+  </div>
+</template>
+
+<script setup>
+import { inject, onMounted, ref } from "vue";
+import UIService, { getRandomId } from "../service.ui";
+
+import { TYPE_RADIO } from "../ui.button-toggle/constants";
+
+import defaultConfig from "./configs/default.config";
+import { UToggleItem } from "./constants";
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UToggleItem", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Set data for button.
+   */
+  modelValue: {
+    type: [String, Number, Array],
+    default: "",
+  },
+
+  /**
+   * Set value for checkbox state.
+   */
+  value: {
+    type: [String, Number],
+    default: "",
+  },
+
+  /**
+   * Set label.
+   */
+  label: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Make item disabled.
+   */
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UToggleItem).default.disabled,
+  },
+
+  /**
+   * The variant of the button.
+   * @values primary, secondary, thirdary
+   */
+  variant: {
+    type: String,
+    default: UIService.get(defaultConfig, UToggleItem).default.variant,
+  },
+
+  /**
+   * Generates unique element id.
+   * @ignore
+   */
+  id: {
+    type: String,
+    default: () => getRandomId(),
+  },
+
+  /**
+   * Sets component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Sets data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const type = inject("toggleType", UIService.get(defaultConfig, UToggleItem).default.type);
+const name = inject("toggleName", "toggle");
+const size = inject("toggleSize", UIService.get(defaultConfig, UToggleItem).default.size);
+const block = inject("toggleBlock", UIService.get(defaultConfig, UToggleItem).default.block);
+const { selectedValue, updateSelectedValue } = inject("toggleSelectedValue", {});
+
+const { wrapperAttrs, labelTextAttrs, labelAttrs, inputAttrs, hasSlotContent } = useAttrs(props, {
+  size,
+  block,
+});
+
+const selectedItem = ref("");
+
+onMounted(() => {
+  if (type.value === TYPE_RADIO) {
+    selectedItem.value = selectedValue ? selectedValue.value : selectedItem.value;
+  } else {
+    selectedItem.value = selectedValue
+      ? selectedValue.value.includes(props.value)
+      : selectedItem.value;
+  }
+});
+
+function onClickSetValue() {
+  if (type.value === TYPE_RADIO) {
+    selectedItem.value = props.value;
+  }
+
+  if (updateSelectedValue) {
+    updateSelectedValue(props.value, !selectedItem.value);
+  }
+
+  emit("update:modelValue", props.value);
+}
+</script>

package/src/ui.container-accordion/composables/attrs.composable.js

@@ -0,0 +1,45 @@
+import { computed } from "vue";
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
+
+import defaultConfig from "../configs/default.config";
+
+export function useAttrs(props, { isOpened }) {
+  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+  const { wrapper, description } = config.value;
+
+  const cvaWrapper = cva({
+    base: wrapper.base,
+    variants: wrapper.variants,
+    compoundVariants: wrapper.compoundVariants,
+  });
+
+  const cvaDescription = cva({
+    base: description.base,
+    variants: description.variants,
+    compoundVariants: description.compoundVariants,
+  });
+
+  const wrapperClasses = computed(() => cvaWrapper({ size: props.size }));
+
+  const descriptionClasses = computed(() =>
+    cvaDescription({ size: props.size, isOpened: isOpened.value }),
+  );
+
+  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
+  const descriptionAttrs = getAttrs("description", { classes: descriptionClasses });
+  const infoAttrs = getAttrs("info");
+  const titleAttrs = getAttrs("title");
+  const iconAttrs = getAttrs("icon", { isComponent: true });
+  const separatorAttrs = getAttrs("separator");
+
+  return {
+    config,
+    wrapperAttrs,
+    descriptionAttrs,
+    infoAttrs,
+    titleAttrs,
+    iconAttrs,
+    separatorAttrs,
+  };
+}

package/src/ui.container-accordion/configs/default.config.js

@@ -0,0 +1,32 @@
+export default /*tw*/ {
+  wrapper: {
+    base: "group cursor-pointer [&:not(:first-child)]:pt-6",
+    variants: {
+      size: {
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg",
+      },
+    },
+  },
+  info: "leading-6",
+  title: "flex items-center justify-between font-medium text-gray-800",
+  description: {
+    base: "text-gray-600 leading-normal h-0 overflow-hidden opacity-0",
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
+      },
+      isOpened: {
+        true: "h-full pt-3 opacity-100 transition-all duration-100 ease-in-out",
+      },
+    },
+  },
+  icon: "",
+  separator: "mt-2 h-px w-full lg:mt-6 bg-gray-100 mt-2.5 group-last:hidden",
+  defaultVariants: {
+    size: "md",
+  },
+};

package/src/ui.container-accordion/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 UAccordion = "UAccordion";

package/src/ui.container-accordion/index.stories.js

@@ -0,0 +1,89 @@
+import { getArgTypes } from "../service.storybook";
+
+import UAccordion from "../ui.container-accordion";
+import UCard from "../ui.container-card";
+import UGroup from "../ui.container-group";
+
+export default {
+  id: "5050",
+  title: "Containers / Accordion",
+  component: UAccordion,
+  argTypes: {
+    ...getArgTypes(UAccordion.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UAccordion, UCard },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UCard>
+      <UAccordion
+        name="accordion1"
+        title="Excellence by necessity"
+        description="As creators and maintainers of the technologies you are using,
+              our services are here to showcase the full power of our softwares."
+      />
+      <UAccordion
+        name="accordion1"
+        title="Unique expertise"
+        description="All the peoples that will be involved in delivering your project are contributing
+              to the technologies you are using, when they are not the creators themselves."
+      />
+      <UAccordion
+        name="accordion1"
+        title="Commitment to innovation"
+        description="By working with us, you are directly supporting the open source community,
+              ensuring the ecosystem continuity and enabling Nuxt development."
+      />
+    </UCard>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { UAccordion, UCard, UGroup },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <UGroup>
+      <UCard v-for="(sizes, index) in sizes" :padding="sizes">
+          <UAccordion
+            :size="size"
+            :name="size"
+            title="Excellence by necessity"
+            description="As creators and maintainers of the technologies you are using,
+              our services are here to showcase the full power of our softwares."
+            :key="index"
+          />
+          <UAccordion
+            :size="size"
+            :name="size"
+            title="Unique expertise"
+            description="All the peoples that will be involved in delivering your project are contributing
+              to the technologies you are using, when they are not the creators themselves."
+            :key="index"
+          />
+          <UAccordion
+            :size="size"
+            :name="size"
+            title="Commitment to innovation"
+            description="By working with us, you are directly supporting the open source community,
+              ensuring the ecosystem continuity and enabling Nuxt development."
+            :key="index"
+          />
+      </UCard>
+    </UGroup>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const Sizes = SizesTemplate.bind({});
+Sizes.args = {};