vueless 0.0.4 → 0.0.6

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 { useAttrs } from "./composables/attrs.composable";
+import defaultConfig from "./configs/default.config";
+import { UToggleItem } from "./constants";
+
+/* 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 = {};

package/src/ui.container-accordion/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <div :data-cy="dataCy" v-bind="wrapperAttrs" @click="onClickItem">
+    <div v-bind="infoAttrs">
+      <div v-bind="titleAttrs">
+        <div v-text="title" />
+
+        <UIcon :name="isOpened ? 'remove' : 'add'" :size="size" color="gray" v-bind="iconAttrs" />
+      </div>
+
+      <div :id="`description-${id}`" v-bind="descriptionAttrs" v-text="description" />
+    </div>
+
+    <div v-bind="separatorAttrs" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+import UIcon from "../ui.image-icon";
+import UIService, { getRandomId } from "../service.ui";
+
+import { UAccordion } from "./constants/index";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UAccordion", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Set component title.
+   */
+  title: {
+    type: String,
+    required: true,
+  },
+
+  /**
+   * Set component description.
+   */
+  description: {
+    type: String,
+    required: true,
+  },
+
+  /**
+   * Set unique block name.
+   * @ignore
+   */
+  name: {
+    type: String,
+    required: true,
+  },
+
+  /**
+   * The size of component.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UAccordion).default.size,
+  },
+
+  /**
+   * Generates unique element id.
+   * @ignore
+   */
+  id: {
+    type: String,
+    default: () => getRandomId(),
+  },
+
+  /**
+   * Sets data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["itemClicked"]);
+
+const isOpened = ref(false);
+
+const { wrapperAttrs, descriptionAttrs, infoAttrs, titleAttrs, iconAttrs, separatorAttrs } =
+  useAttrs(props, { isOpened });
+
+function onClickItem() {
+  isOpened.value = !isOpened.value;
+
+  emit("itemClicked", props.name);
+}
+</script>

package/src/ui.container-card/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.container-card/composable/attrs.composable.js

@@ -0,0 +1,56 @@
+import useUI from "../../composable.ui";
+import { cva, cx } from "../../service.ui";
+
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+
+export function useAttrs(props, { isMobileDevice }) {
+  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { wrapper } = config.value;
+
+  const cvaWrapper = cva({
+    base: wrapper.base,
+    variants: wrapper.variants,
+    compoundVariants: wrapper.compoundVariants,
+  });
+
+  const wrapperClasses = computed(() =>
+    cvaWrapper({
+      padding: props.padding,
+      rounded: props.rounded,
+    }),
+  );
+
+  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
+  const headerAttrs = getAttrs("header");
+  const headerLeftAttrs = getAttrs("headerLeft");
+  const headerLeftFallbackAttrs = getAttrs("headerLeftFallback");
+  const titleAttrs = getAttrs("title", { isComponent: true });
+  const descriptionAttrs = getAttrs("description");
+  const contentAttrs = getAttrs("content");
+  const dividerAttrs = getAttrs("divider", { isComponent: true });
+  const footerAttrsRaw = getAttrs("footer");
+
+  const footerAttrs = computed(() => {
+    const footerMobileReverseClasses =
+      props.mobileFooterReverse && isMobileDevice.value && config.value.footerMobileReverse;
+
+    return {
+      ...footerAttrsRaw.value,
+      class: cx([footerAttrsRaw.value.class, footerMobileReverseClasses]),
+    };
+  });
+
+  return {
+    hasSlotContent,
+    wrapperAttrs,
+    titleAttrs,
+    dividerAttrs,
+    headerAttrs,
+    headerLeftAttrs,
+    headerLeftFallbackAttrs,
+    descriptionAttrs,
+    contentAttrs,
+    footerAttrs,
+  };
+}

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

@@ -0,0 +1,31 @@
+export default /*tw*/ {
+  wrapper: {
+    base: "border border-gray-200 bg-white space-y-4 md:space-y-6 w-full",
+    variants: {
+      rounded: {
+        sm: "rounded-lg",
+        md: "rounded-2xl",
+        lg: "rounded-3xl",
+      },
+      padding: {
+        sm: "p-2 md:p-4",
+        md: "p-4 md:p-6",
+        lg: "p-6 md:p-8",
+      },
+    },
+  },
+  header: "flex justify-between",
+  headerLeft: "flex items-center space-x-4 w-full",
+  headerLeftFallback: "flex flex-col w-full",
+  title: "",
+  description: "mt-1.5 text-base font-normal text-gray-500",
+  content: "",
+  divider: "",
+  footer: "flex justify-between",
+  footerMobileReverse: "flex flex-col-reverse space-y-reverse",
+  defaultVariants: {
+    padding: "md",
+    rounded: "md",
+    mobileFooterReverse: false,
+  },
+};

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