vueless 0.0.3 → 0.0.4

package/ui.data-table-cell/composables/attrs.composable.js

@@ -1,24 +0,0 @@
-import useUI from "vueless/composable.ui";
-import { cva } from "vueless/service.ui";
-
-import defaultConfig from "../configs/default.config";
-import { computed } from "vue";
-
-export function useAttrs(props) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-  const { tableCell } = config.value;
-
-  const cvaTableCell = cva({
-    base: tableCell.base,
-    variants: tableCell.variants,
-    compoundVariants: tableCell.compoundVariants,
-  });
-
-  const tableCellClasses = computed(() => cvaTableCell({ compact: props.compact }));
-
-  const tableCellAttrs = getAttrs("tableCell", { classes: tableCellClasses });
-
-  return {
-    tableCellAttrs,
-  };
-}

package/ui.data-table-cell/configs/default.config.js

@@ -1,19 +0,0 @@
-export default /*tw*/ {
-  tableCell: {
-    base: `
-      p-[1.125rem] py-5 first:p-5 [&:nth-child(2)]:pl-0 group-[]/body:truncate group-[]/body:align-top 
-      group-[]/body:last:p-5
-    `,
-    variants: {
-      compact: {
-        true: `
-          group-[]/body:px-4 group-[]/body:py-3 group-[]/body:last:px-4 group-[]/body:last:py-3 
-          group-[]/body:first:px-4 group-[]/body:first:py-3 group-[]/footer:p-4:
-        `,
-      },
-    },
-  },
-  defaultVariants: {
-    compact: false,
-  },
-};

package/ui.data-table-cell/index.vue

@@ -1,44 +0,0 @@
-<template>
-  <td :data-cy="dataCy" v-bind="tableCellAttrs">
-    <slot />
-  </td>
-</template>
-
-<script setup>
-import UIService from "vueless/service.ui";
-
-import { UTableCell } from "./constants";
-import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
-
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UTableCell", inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Makes the cell more narrow.
-   */
-  compact: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UTableCell).default.compact,
-  },
-
-  /**
-   * Sets component ui config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Sets data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-const { tableCellAttrs } = useAttrs(props);
-</script>

package/ui.dropdown-badge/Docs.mdx

@@ -1,16 +0,0 @@
-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.dropdown-badge/composables/attrs.composable.js

@@ -1,63 +0,0 @@
-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, { isShownOptions }) {
-  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-  const { listWrapper } = config.value;
-
-  const cvaListWrapper = cva({
-    base: listWrapper.base,
-    variants: listWrapper.variants,
-    compoundVariants: listWrapper.compoundVariants,
-  });
-
-  // Get list wrapper position classes to apply them to list without wrapper
-  const cvaListWrapperVariants = cva({
-    base: "",
-    variants: listWrapper.variants,
-    compoundVariants: [],
-  });
-
-  const listWrapperPositionClasses = computed(() =>
-    cvaListWrapperVariants({
-      listYPosition: props.listYPosition,
-      listXPosition: props.listXPosition,
-    }),
-  );
-
-  const listWrapperClasses = computed(() =>
-    cvaListWrapper({
-      listYPosition: props.listYPosition,
-      listXPosition: props.listXPosition,
-    }),
-  );
-
-  const wrapperAttrs = getAttrs("wrapper");
-  const badgeAttrs = getAttrs("badge", { isComponent: true });
-  const iconAttrsRaw = getAttrs("icon", { isComponent: true });
-
-  const iconAttrs = computed(() => {
-    const rotateClasses = isShownOptions.value && config.value.iconRotate;
-
-    return {
-      ...iconAttrsRaw.value,
-      class: cx([iconAttrsRaw.value.class, rotateClasses]),
-    };
-  });
-
-  const listWrapperAttrs = getAttrs("listWrapper", { classes: listWrapperClasses });
-  const listAttrs = getAttrs("list", { isComponent: true, classes: listWrapperPositionClasses });
-
-  return {
-    listWrapperAttrs,
-    wrapperAttrs,
-    badgeAttrs,
-    listAttrs,
-    iconAttrs,
-    config,
-    hasSlotContent,
-  };
-}

package/ui.dropdown-badge/configs/default.config.js

@@ -1,34 +0,0 @@
-export default /*tw*/ {
-  wrapper: "relative inline-block",
-  badge: "cursor-pointer",
-  icon: "transition-all duration-300",
-  iconName: "keyboard_arrow_down",
-  iconRotate: "rotate-180",
-  listWrapper: {
-    base: `
-      absolute z-10
-      max-h-60 overflow-y-auto overflow-x-hidden md:!w-auto
-      rounded-lg border-gray-300 shadow bg-white
-    `,
-    variants: {
-      listYPosition: {
-        top: "bottom-6 mb-6",
-        bottom: "top-3 mt-6",
-      },
-      listXPosition: {
-        left: "left-0",
-        right: "right-0",
-      },
-    },
-  },
-  list: "w-fit",
-  defaultVariants: {
-    color: "brand",
-    size: "md",
-    weight: "medium",
-    variant: "primary",
-    listYPosition: "bottom",
-    listXPosition: "left",
-    noIcon: false,
-  },
-};

package/ui.dropdown-badge/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 UDropdownBadge = "UDropdownBadge";

package/ui.dropdown-badge/index.stories.js

@@ -1,126 +0,0 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
-
-import UDropdownBadge from "vueless/ui.dropdown-badge";
-import UDropdownItem from "vueless/ui.dropdown-item";
-import URow from "vueless/ui.container-row";
-
-export default {
-  id: "2020",
-  title: "Dropdowns / Dropdown Badge",
-  component: UDropdownBadge,
-  args: {
-    label: "Dropdown",
-    options: [
-      { label: "option 1", value: "1" },
-      { label: "option 2", value: "2" },
-      { label: "option 3", value: "3" },
-    ],
-  },
-  argTypes: {
-    ...getArgTypes(UDropdownBadge.name),
-  },
-  parameters: {
-    docs: {
-      story: {
-        height: "200px",
-      },
-    },
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UDropdownBadge },
-  setup() {
-    const slots = getSlotNames(UDropdownBadge.name);
-
-    return { args, slots };
-  },
-  template: `
-    <UDropdownBadge
-      v-bind="args"
-    >
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
-    </UDropdownBadge>
-  `,
-});
-
-const SlotTemplate = (args) => ({
-  components: { UDropdownBadge, UDropdownItem },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UDropdownBadge
-      v-bind="args"
-    >
-      ${args.slotTemplate}
-    </UDropdownBadge>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UDropdownBadge, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <UDropdownBadge
-        v-for="(size, index) in sizes"
-        v-bind="args"
-        :size="size"
-        :label="size"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-const ColorsTemplate = (args, { argTypes } = {}) => ({
-  components: { UDropdownBadge, URow },
-  setup() {
-    return {
-      args,
-      colors: argTypes.color.options,
-    };
-  },
-  template: `
-    <URow>
-      <UDropdownBadge
-        v-for="(color, index) in colors"
-        :color="color"
-        :label="color"
-        v-bind="args"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
-
-export const colors = ColorsTemplate.bind({});
-colors.args = {};
-
-export const withoutDropdownIcon = DefaultTemplate.bind({});
-withoutDropdownIcon.args = { noIcon: true };
-
-export const dropdownListSlot = SlotTemplate.bind({});
-dropdownListSlot.args = {
-  slotTemplate: `
-    <template #default>
-      <UDropdownItem label="Some option" />
-      <UDropdownItem label="Some option 2" />
-      <UDropdownItem label="Some option 3" />
-    </template>
-  `,
-};

package/ui.dropdown-badge/index.vue

@@ -1,233 +0,0 @@
-<template>
-  <div v-bind="wrapperAttrs">
-    <UBadge
-      :id="id"
-      :label="label"
-      :size="size"
-      :color="color"
-      :weight="weight"
-      :variant="variant"
-      :data-cy="`${dataCy}-badge`"
-      v-bind="badgeAttrs"
-      @click.stop="onClickBadge"
-    >
-      <template #right>
-        <UIcon
-          v-if="!noIcon"
-          :name="config.iconName"
-          :size="iconSize"
-          :color="color"
-          :data-cy="`${dataCy}-caret`"
-          v-bind="iconAttrs"
-        />
-      </template>
-    </UBadge>
-
-    <div v-if="isShownOptions && hasSlotContent($slots['default'])" v-bind="listWrapperAttrs">
-      <!-- @slot Use it to add dropdown list. -->
-      <slot />
-    </div>
-
-    <UDropdownList
-      v-if="isShownOptions && !hasSlotContent($slots['default'])"
-      v-model="selectValue"
-      :size="size"
-      :options="options"
-      :value-key="valueKey"
-      :label-key="labelKey"
-      :data-cy="`${dataCy}-item`"
-      v-bind="listAttrs"
-    />
-  </div>
-</template>
-
-<script setup>
-import { computed, onMounted, onUnmounted, provide, ref, watch } from "vue";
-
-import UIcon from "vueless/ui.image-icon";
-import UBadge from "vueless/ui.text-badge";
-import UDropdownList from "vueless/ui.dropdown-list";
-import UIService, { getRandomId } from "vueless/service.ui";
-
-import defaultConfig from "./configs/default.config";
-import { UDropdownBadge } from "./constants";
-import { useAttrs } from "./composables/attrs.composable";
-
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UDropdownBadge", inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Selected value.
-   */
-  modelValue: {
-    type: [String, Number],
-    default: "",
-  },
-
-  /**
-   * Badge label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Badge variant.
-   * @values primary, secondary, thirdary
-   */
-  variant: {
-    type: String,
-    default: UIService.get(defaultConfig, UDropdownBadge).default.variant,
-  },
-
-  /**
-   * Badge color.
-   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
-   */
-  color: {
-    type: String,
-    default: UIService.get(defaultConfig, UDropdownBadge).default.color,
-  },
-
-  /**
-   * Badge size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: UIService.get(defaultConfig, UDropdownBadge).default.size,
-  },
-
-  /**
-   * Badge font weight.
-   * @values regular, medium, bold
-   */
-  weight: {
-    type: String,
-    default: UIService.get(defaultConfig, UDropdownBadge).default.weight,
-  },
-
-  /**
-   * Hide dropdown icon.
-   */
-  noIcon: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UDropdownBadge).default.noIcon,
-  },
-
-  /**
-   * Options list.
-   */
-  options: {
-    type: Array,
-    default: () => [],
-  },
-
-  /**
-   * Label key in the item object of options.
-   */
-  labelKey: {
-    type: String,
-    default: "label",
-  },
-
-  /**
-   * Value key in the item object of options.
-   */
-  valueKey: {
-    type: String,
-    default: "id",
-  },
-
-  /**
-   * The position of dropdown list on the y-axis.
-   * @values top, bottom
-   */
-  listYPosition: {
-    type: String,
-    default: UIService.get(defaultConfig, UDropdownBadge).default.listYPosition,
-  },
-
-  /**
-   * The position of dropdown list on the x-axis.
-   * @values left, right
-   */
-  listXPosition: {
-    type: String,
-    default: UIService.get(defaultConfig, UDropdownBadge).default.listXPosition,
-  },
-
-  /**
-   * Generates unique element id.
-   * @ignore
-   */
-  id: {
-    type: String,
-    default: () => getRandomId(),
-  },
-
-  /**
-   * Component ui config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-provide("hideDropdownOptions", () => hideOptions);
-
-const emit = defineEmits(["update:modelValue"]);
-
-const isShownOptions = ref(false);
-
-const { config, listWrapperAttrs, wrapperAttrs, badgeAttrs, listAttrs, iconAttrs, hasSlotContent } =
-  useAttrs(props, { isShownOptions });
-
-const selectValue = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    isShownOptions.value = false;
-    emit("update:modelValue", value);
-  },
-});
-
-const iconSize = computed(() => {
-  const sizes = {
-    sm: "xs",
-    md: "sm",
-    lg: "md",
-  };
-
-  return sizes[props.size];
-});
-
-watch(() => props.modelValue, hideOptions);
-
-onMounted(() => window.addEventListener("click", onClickOutside));
-onUnmounted(() => window.removeEventListener("click", onClickOutside));
-
-function onClickBadge() {
-  isShownOptions.value = !isShownOptions.value;
-}
-
-function hideOptions() {
-  isShownOptions.value = false;
-}
-
-function onClickOutside(event) {
-  if (!document.getElementById(props.id)?.contains(event.target)) {
-    hideOptions();
-  }
-}
-</script>

package/ui.dropdown-button/Docs.mdx

@@ -1,16 +0,0 @@
-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.dropdown-button/composables/attrs.composable.js

@@ -1,63 +0,0 @@
-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, { isShownOptions }) {
-  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-  const { listWrapper } = config.value;
-
-  const cvaListWrapper = cva({
-    base: listWrapper.base,
-    variants: listWrapper.variants,
-    compoundVariants: listWrapper.compoundVariants,
-  });
-
-  const listWrapperClasses = computed(() =>
-    cvaListWrapper({
-      listYPosition: props.listYPosition,
-      listXPosition: props.listXPosition,
-    }),
-  );
-
-  // Get list wrapper position classes to apply them to list without wrapper
-  const cvaListWrapperVariants = cva({
-    base: "",
-    variants: listWrapper.variants,
-    compoundVariants: [],
-  });
-
-  const listWrapperPositionClasses = computed(() =>
-    cvaListWrapperVariants({
-      listYPosition: props.listYPosition,
-      listXPosition: props.listXPosition,
-    }),
-  );
-
-  const wrapperAttrs = getAttrs("wrapper");
-  const buttonAttrs = getAttrs("button", { isComponent: true });
-  const iconAttrsRaw = getAttrs("icon", { isComponent: true });
-
-  const iconAttrs = computed(() => {
-    const rotateClasses = isShownOptions.value && config.value.iconRotate;
-
-    return {
-      ...iconAttrsRaw.value,
-      class: cx([iconAttrsRaw.value.class, rotateClasses]),
-    };
-  });
-
-  const listWrapperAttrs = getAttrs("listWrapper", { classes: listWrapperClasses });
-  const listAttrs = getAttrs("list", { isComponent: true, classes: listWrapperPositionClasses });
-
-  return {
-    config,
-    listWrapperAttrs,
-    buttonAttrs,
-    listAttrs,
-    iconAttrs,
-    wrapperAttrs,
-    hasSlotContent,
-  };
-}

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

@@ -1,37 +0,0 @@
-export default /*tw*/ {
-  wrapper: "relative inline-block",
-  button: "",
-  icon: "transition-all duration-300",
-  iconName: "keyboard_arrow_down",
-  iconRotate: "rotate-180",
-  listWrapper: {
-    base: `
-      absolute z-10 inline-block
-      max-h-60 overflow-y-auto overflow-x-hidden md:!w-auto
-      rounded-lg border-gray-300 shadow bg-white
-    `,
-    variants: {
-      listYPosition: {
-        top: "bottom-full mb-4",
-        bottom: "top-full mt-4",
-      },
-      listXPosition: {
-        left: "left-0",
-        right: "right-0",
-      },
-    },
-  },
-  list: "w-fit",
-  defaultVariants: {
-    color: "brand",
-    size: "md",
-    variant: "primary",
-    listYPosition: "bottom",
-    listXPosition: "left",
-    filled: false,
-    pill: false,
-    square: false,
-    noIcon: false,
-    disabled: false,
-  },
-};

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

@@ -1,14 +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 UDropdownButton = "UDropdownButton";
-
-export const BUTTON_VARIANT = {
-  primary: "primary",
-};
-
-export const LIST_POSITION = {
-  bottom: "bottom",
-  right: "right",
-};