vueless 0.0.8 → 0.0.10

package/src/ui.button-toggle-item/index.stories.js

@@ -1,77 +0,0 @@
-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

@@ -1,147 +0,0 @@
-<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

@@ -1,45 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,5 +0,0 @@
-/*
-  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

@@ -1,89 +0,0 @@
-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

@@ -1,95 +0,0 @@
-<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

@@ -1,16 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,5 +0,0 @@
-/*
-  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";