vueless 0.0.2 → 0.0.3

package/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 "vueless/service.ui";
+
+import { TYPE_RADIO } from "vueless/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/ui.container-accordion/composables/attrs.composable.js

@@ -0,0 +1,45 @@
+import { computed } from "vue";
+import useUI from "vueless/composable.ui";
+import { cva } from "vueless/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/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/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/ui.container-accordion/index.stories.js

@@ -5,6 +5,7 @@ import UCard from "vueless/ui.container-card";
 import UGroup from "vueless/ui.container-group";
 
 export default {
+  id: "5050",
   title: "Containers / Accordion",
   component: UAccordion,
   argTypes: {
@@ -41,7 +42,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const SizesTemplate = (args, { argTypes }) => ({
+const SizesTemplate = (args, { argTypes } = {}) => ({
   components: { UAccordion, UCard, UGroup },
   setup() {
     return {
@@ -51,7 +52,7 @@ const SizesTemplate = (args, { argTypes }) => ({
   },
   template: `
     <UGroup>
-      <UCard v-for="(size, index) in sizes" :size="size">
+      <UCard v-for="(sizes, index) in sizes" :padding="sizes">
           <UAccordion
             :size="size"
             :name="size"

package/ui.container-accordion/index.vue

@@ -1,167 +1,95 @@
 <template>
-  <div class="mono-accordion" :class="sizeClass" :data-cy="dataCy" @click="onClickItem">
-    <div class="item-info">
-      <div class="info-title">
-        <div>
-          {{ title }}
-        </div>
-
-        <UIcon :name="isOpened ? 'remove' : 'add'" class="info-icon" :size="size" color="gray" />
-      </div>
+  <div :data-cy="dataCy" v-bind="wrapperAttrs" @click="onClickItem">
+    <div v-bind="infoAttrs">
+      <div v-bind="titleAttrs">
+        <div v-text="title" />
 
-      <div :ref="name" class="info-description">
-        {{ description }}
+        <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 class="separator" />
+    <div v-bind="separatorAttrs" />
   </div>
 </template>
 
-<script>
-import UIcon from "vueless/ui.image-icon";
+<script setup>
+import { ref } from "vue";
 
-export default {
-  name: "UAccordion",
-  components: {
-    UIcon,
+import UIcon from "vueless/ui.image-icon";
+import UIService, { getRandomId } from "vueless/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,
   },
 
-  props: {
-    /**
-     * 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: "md",
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
+  /**
+   * Set component description.
+   */
+  description: {
+    type: String,
+    required: true,
   },
 
-  emits: ["itemClicked"],
-
-  data: () => ({
-    isOpened: false,
-  }),
-
-  computed: {
-    // TODO: This is super weird, need to be removed!
-    descriptionNode() {
-      return this.$refs[this.name];
-    },
-
-    sizeClass() {
-      return `size-${this.size}`;
-    },
+  /**
+   * Set unique block name.
+   * @ignore
+   */
+  name: {
+    type: String,
+    required: true,
   },
 
-  methods: {
-    onClickItem() {
-      this.isOpened = !this.isOpened;
-      this.descriptionNode.classList.toggle("show-description");
-
-      this.$emit("itemClicked", this.name);
-    },
+  /**
+   * The size of component.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UAccordion).default.size,
   },
-};
-</script>
 
-<style scoped lang="postcss">
-.mono-accordion {
-  @apply cursor-pointer;
-
-  &:not(:first-child) {
-    @apply pt-6;
-  }
-
-  &:last-child {
-    .separator {
-      @apply hidden;
-    }
-  }
-
-  .item-info {
-    @apply leading-6;
-
-    .info-title {
-      @apply flex items-center justify-between;
-      @apply font-medium text-gray-800;
-    }
-
-    .info-description {
-      @apply h-0 overflow-hidden opacity-0;
-      @apply text-gray-600 leading-normal;
-    }
-
-    .show-description {
-      @apply h-full pt-3 opacity-100;
-      @apply transition-all duration-100 ease-in-out;
-    }
-  }
-
-  .separator {
-    @apply mt-2 h-px w-full lg:mt-6;
-    @apply bg-gray-100;
-    @apply mt-2.5;
-  }
-}
+  /**
+   * Generates unique element id.
+   * @ignore
+   */
+  id: {
+    type: String,
+    default: () => getRandomId(),
+  },
 
-.size {
-  &-sm {
-    @apply text-sm;
+  /**
+   * Sets data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
 
-    .info-description {
-      @apply text-xs;
-    }
-  }
+const emit = defineEmits(["itemClicked"]);
 
-  &-md {
-    @apply text-base;
+const isOpened = ref(false);
 
-    .info-description {
-      @apply text-sm;
-    }
-  }
+const { wrapperAttrs, descriptionAttrs, infoAttrs, titleAttrs, iconAttrs, separatorAttrs } =
+  useAttrs(props, { isOpened });
 
-  &-lg {
-    @apply text-lg;
+function onClickItem() {
+  isOpened.value = !isOpened.value;
 
-    .info-description {
-      @apply text-base;
-    }
-  }
+  emit("itemClicked", props.name);
 }
-</style>
+</script>

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

@@ -0,0 +1,56 @@
+import useUI from "vueless/composable.ui";
+import { cva, cx } from "vueless/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/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/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";