vueless 0.0.3 → 0.0.4

package/ui.container-page/index.stories.js

@@ -1,147 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import UPage from "vueless/ui.container-page";
-import UCard from "vueless/ui.container-card";
-import URow from "vueless/ui.container-row";
-import UInput from "vueless/ui.form-input";
-import UTextarea from "vueless/ui.form-textarea";
-import UButton from "vueless/ui.button";
-import UIcon from "vueless/ui.image-icon";
-import UHeader from "vueless/ui.text-header";
-
-export default {
-  id: "5090",
-  title: "Containers / Page",
-  component: UPage,
-  args: {
-    title: "Title",
-    gray: true,
-    slotDefaultTemplate: `
-      <template #default>
-        <UCard title="Card title">
-          <URow>
-            <UInput label="Name" />
-            <UInput label="Lastname" />
-          </URow>
-          <UTextarea class="mb-7 mt-4" label="Comments" rows="3" />
-        </UCard>
-      </template>
-    `,
-  },
-  argTypes: {
-    ...getArgTypes(UPage.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: {
-    UPage,
-    UCard,
-    URow,
-    UInput,
-    UTextarea,
-    UButton,
-    UIcon,
-    UHeader,
-  },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UPage v-bind="args">
-      ${args.slotDefaultTemplate}
-      ${args.slotTemplate || ""}
-    </UPage>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const titleSizeSm = DefaultTemplate.bind({});
-titleSizeSm.args = { titleSize: "sm" };
-
-export const classes = DefaultTemplate.bind({});
-classes.args = {
-  classes: {
-    header: "text-violet-300",
-  },
-};
-
-export const description = DefaultTemplate.bind({});
-description.args = { description: "Page description" };
-
-export const width = DefaultTemplate.bind({});
-width.args = { width: "md", title: "Width = md" };
-
-export const widePage = DefaultTemplate.bind({});
-widePage.args = { widePage: true, width: "sm" };
-
-export const backRoute = DefaultTemplate.bind({});
-backRoute.args = {
-  backRoute: {
-    name: "",
-    title: "some route title",
-    params: {},
-  },
-};
-
-export const slotHeaderLeftBefore = DefaultTemplate.bind({});
-slotHeaderLeftBefore.args = {
-  slotTemplate: `
-    <template #header-left-before>
-      <UIcon
-        name="close"
-        color="gray"
-       />
-    </template>
-  `,
-};
-
-export const slotHeaderLeft = DefaultTemplate.bind({});
-slotHeaderLeft.args = {
-  slotTemplate: `
-    <template #header-left>
-      <UHeader size="lg" label="Large title" />
-    </template>
-  `,
-};
-
-export const slotHeaderLeftAfter = DefaultTemplate.bind({});
-slotHeaderLeftAfter.args = {
-  slotTemplate: `
-    <template #header-left-after>
-      <UIcon
-        name="close"
-        color="gray"
-       />
-    </template>
-  `,
-};
-
-export const slotHeaderRight = DefaultTemplate.bind({});
-slotHeaderRight.args = {
-  slotTemplate: `
-    <template #header-right>
-       <UButton size="sm" color="gray" label="button" />
-    </template>
-  `,
-};
-
-export const slotFooterLeft = DefaultTemplate.bind({});
-slotFooterLeft.args = {
-  slotTemplate: `
-    <template #footer-left>
-        <UButton label="button" />
-    </template>
-  `,
-};
-
-export const slotFooterRight = DefaultTemplate.bind({});
-slotFooterRight.args = {
-  slotTemplate: `
-    <template #footer-right>
-        <UButton label="button" />
-    </template>
-  `,
-};

package/ui.container-page/index.vue

@@ -1,271 +0,0 @@
-<template>
-  <div :data-cy="dataCy" v-bind="wrapperAttrs">
-    <div v-bind="pageAttrs">
-      <div v-if="isShownHeader" v-bind="headerAttrs">
-        <div v-bind="headerLeftAttrs">
-          <!-- @slot Use it to add something before left side of the header. -->
-          <slot name="header-left-before" />
-
-          <!-- @slot Use it to customise left side of the header. -->
-          <slot name="header-left">
-            <div v-bind="headerLeftFallbackAttrs">
-              <ULink
-                v-if="isShownArrowButton"
-                size="xs"
-                color="gray"
-                :route="backRoute"
-                v-bind="backLinkAttrs"
-              >
-                <UIcon
-                  :name="config.backLinkIconName"
-                  size="xs"
-                  color="gray"
-                  v-bind="backLinkIconAttrs"
-                />
-                {{ backRoute.title }}
-              </ULink>
-
-              <UHeader :label="title" :size="titleSize" v-bind="titleAttrs" />
-              <div v-if="description" v-bind="descriptionAttrs" v-text="description" />
-            </div>
-          </slot>
-
-          <!-- @slot Use it to add something after left side of the header. -->
-          <slot name="header-left-after" />
-        </div>
-
-        <div v-bind="headerRightAttrs">
-          <!-- @slot Use it to customise right side of the header. -->
-          <slot name="header-right" />
-        </div>
-      </div>
-
-      <div>
-        <!-- @slot Use it to add main content. -->
-        <slot />
-      </div>
-
-      <div v-if="isShownFooterSlot" class="vueless-page-footer" v-bind="footerAttrs">
-        <div class="vueless-page-footer-left" v-bind="footerLeftAttrs">
-          <!-- @slot Use it to add something to the left side of the footer. -->
-          <slot name="footer-left" />
-        </div>
-
-        <div class="vueless-page-footer-right" v-bind="footerRightAttrs">
-          <!-- @slot Use it to add something to the right side of the footer. -->
-          <slot name="footer-right" />
-        </div>
-      </div>
-    </div>
-
-    <div v-if="fixedRounding && !isMobileDevice" v-bind="rightRoundingWrapperAttrs">
-      <div v-bind="rightRoundingAttrs" />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, useSlots, onMounted } from "vue";
-import { useStore } from "vuex";
-
-import UIService from "vueless/service.ui";
-
-import defaultConfig from "./configs/default.config";
-import { UPage } from "./constants";
-import { useAttrs } from "./composables/attrs.composable";
-
-const slots = useSlots();
-const store = useStore();
-
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UPage", inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * The width of the page.
-   * @values xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, wide
-   */
-  width: {
-    type: String,
-    default: UIService.get(defaultConfig, UPage).default.width,
-  },
-
-  /**
-   * Set page title.
-   */
-  title: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Set page title size.
-   * @values xs, sm, md, lg, xl, 2xl
-   */
-  titleSize: {
-    type: String,
-    default: UIService.get(defaultConfig, UPage).default.titleSize,
-  },
-
-  /**
-   * Set page description.
-   */
-  description: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Set Vue router route params for back arrow.
-   */
-  backRoute: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Set gray background color.
-   */
-  gray: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UPage).default.gray,
-  },
-
-  /**
-   * Reverse left and right footer blocks (in a mobile version only).
-   */
-  mobileFooterReverse: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UPage).default.mobileFooterReverse,
-  },
-
-  /**
-   * Stick right page rounding.
-   */
-  fixedRounding: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UPage).default.fixedRounding,
-  },
-
-  /**
-   * Sets component ui config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Sets data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-const isMobileDevice = computed(() => {
-  return store.getters["breakpoint/isMobileDevice"];
-});
-
-const {
-  config,
-  wrapperAttrs,
-  pageAttrs,
-  rightRoundingAttrs,
-  titleAttrs,
-  backLinkAttrs,
-  backLinkIconAttrs,
-  headerAttrs,
-  headerLeftFallbackAttrs,
-  descriptionAttrs,
-  headerLeftAttrs,
-  headerRightAttrs,
-  footerAttrs,
-  footerLeftAttrs,
-  footerRightAttrs,
-  rightRoundingWrapperAttrs,
-  hasSlotContent,
-} = useAttrs(props, { isMobileDevice });
-
-const isShownHeader = computed(() => {
-  const isHeaderLeftSlot = hasSlotContent(slots["header-left"]);
-  const isHeaderRightSlot = hasSlotContent(slots["header-left"]);
-
-  return props.title || isHeaderLeftSlot || isHeaderRightSlot;
-});
-
-const isShownFooterSlot = computed(() => {
-  return hasSlotContent(slots["footer-left"]) || hasSlotContent(slots["footer-right"]);
-});
-
-const isShownArrowButton = computed(() => {
-  return Boolean(Object.keys(props.backRoute).length);
-});
-
-onMounted(() => {
-  const classes = props.gray
-    ? config.value.htmlBody.split(" ").filter((item) => Boolean(item))
-    : "";
-
-  document.querySelector("body").classList.add(...classes);
-});
-</script>
-
-<style lang="postcss" scoped>
-/**
-  * TODO: Move this styles to global vueless config using tailwind group class and remove footer classes
-  */
-.vueless-page {
-  &-footer {
-    &-left:deep(.vueless-dropdown-button) {
-      @apply !block;
-    }
-
-    &-right,
-    &-left {
-      :deep(.vueless-dropdown-button) {
-        .dropdown-block,
-        .vueless-dropdown-button-list {
-          @apply max-md:w-full;
-        }
-
-        .vueless-dropdown-item {
-          @apply max-md:text-center;
-        }
-
-        .dropdown-list {
-          @apply mb-[calc(theme("spacing.mobile-menu-height")+3rem)];
-        }
-      }
-
-      &:deep(.vueless-dropdown-tag, .vueless-dropdown-link, .vueless-dropdown-button) {
-        @apply w-full md:w-auto;
-
-        .dropdown-list {
-        }
-
-        .dropdown-wrapper-list {
-          @apply mb-2 md:mb-0;
-        }
-
-        .dropdown-block {
-          @apply relative md:absolute;
-        }
-
-        .dropdown-list-right {
-          @apply w-full text-center;
-        }
-
-        .dropdown-wrapper {
-          @apply block w-full;
-
-          .vueless-svg-icon {
-            @apply right-auto;
-          }
-        }
-      }
-    }
-  }
-}
-</style>

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

@@ -1,23 +0,0 @@
-import useUI from "vueless/composable.ui";
-import defaultConfig from "../configs/default.config";
-import { cva } from "vueless/service.ui";
-import { computed } from "vue";
-
-export function useAttrs(props) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-  const { wrapper } = config.value;
-
-  const cvaWrapper = cva({
-    base: wrapper.base,
-    variants: wrapper.variants,
-    compoundVariants: wrapper.compoundVariants,
-  });
-
-  const wrapperClasses = computed(() => cvaWrapper({ noMobile: props.noMobile }));
-
-  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
-
-  return {
-    wrapperAttrs,
-  };
-}

package/ui.container-row/configs/default.config.js

@@ -1,14 +0,0 @@
-export default /*tw*/ {
-  wrapper: {
-    base: "flex items-start w-full",
-    variants: {
-      noMobile: {
-        true: "flex-row space-x-4",
-        false: "flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4",
-      },
-    },
-  },
-  defaultVariants: {
-    noMobile: false,
-  },
-};

package/ui.container-row/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 URow = "URow";

package/ui.container-row/index.stories.js

@@ -1,81 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import URow from "vueless/ui.container-row";
-import UInput from "vueless/ui.form-input";
-
-export default {
-  id: "5020",
-  title: "Containers / Row",
-  component: URow,
-  argTypes: {
-    ...getArgTypes(URow.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { URow, UInput },
-  setup() {
-    return { args };
-  },
-  template: `
-    <URow v-bind="args">
-      ${args.slotTemplate}
-    </URow>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {
-  slotTemplate: `
-    <UInput label="Name" />
-    <UInput label="Lastname" />
-  `,
-};
-
-export const noMobile = DefaultTemplate.bind({});
-noMobile.args = {
-  noMobile: true,
-  slotTemplate: `
-    <UInput label="Name" />
-    <UInput label="Lastname" />
-  `,
-};
-
-export const nestedRows = DefaultTemplate.bind({});
-nestedRows.args = {
-  slotTemplate: `
-    <UInput label="Name" />
-
-    <URow>
-      <UInput label="Lastname" />
-      <UInput label="Age"/>
-    </URow>
-  `,
-};
-
-export const textBlocks = DefaultTemplate.bind({});
-textBlocks.args = {
-  slotTemplate: `
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-      sed do eiusmod tempor incididunt ut labore et dolore magna
-      aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-      ullamco laboris nisi ut aliquip ex ea commodo consequat.
-      Duis aute irure dolor in reprehenderit in voluptate velit
-      esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-      occaecat cupidatat non proident, sunt in culpa qui officia
-      deserunt mollit anim id est laborum.
-    </p>
-
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-      sed do eiusmod tempor incididunt ut labore et dolore magna
-      aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-      ullamco laboris nisi ut aliquip ex ea commodo consequat.
-      Duis aute irure dolor in reprehenderit in voluptate velit
-      esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-      occaecat cupidatat non proident, sunt in culpa qui officia
-      deserunt mollit anim id est laborum.
-    </p>
-  `,
-};

package/ui.container-row/index.vue

@@ -1,45 +0,0 @@
-<template>
-  <div :data-cy="dataCy" v-bind="wrapperAttrs">
-    <!-- @slot Use it to add something inside. -->
-    <slot />
-  </div>
-</template>
-
-<script setup>
-import UIService from "vueless/service.ui";
-
-import { URow } 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: "URow", inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Disables mobile adaptivity.
-   */
-  noMobile: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, URow).default.noMobile,
-  },
-
-  /**
-   * Sets component ui config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Sets data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-const { wrapperAttrs } = useAttrs(props);
-</script>

package/ui.data-list/composables/attrs.composable.js

@@ -1,45 +0,0 @@
-import useUI from "vueless/composable.ui";
-import defaultConfig from "../configs/default.config";
-import { computed } from "vue";
-import { cx } from "vueless/service.ui";
-
-export function useAttrs(props) {
-  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-  const { titleCrossed } = config.value;
-
-  const wrapperAttrs = getAttrs("wrapper");
-  const dividerAttrs = getAttrs("divider", { isComponent: true });
-  const emptyAttrs = getAttrs("empty", { isComponent: true });
-  const draggableAttrs = getAttrs("draggable");
-  const itemWrapperAttrs = getAttrs("itemWrapper");
-  const itemAttrs = getAttrs("item");
-  const customActionsAttrs = getAttrs("customActions");
-  const iconDeleteAttrs = getAttrs("iconDelete", { isComponent: true });
-  const iconEditAttrs = getAttrs("iconEdit", { isComponent: true });
-  const iconDragAttrs = getAttrs("iconDrag", { isComponent: true });
-  const nestedAttrs = getAttrs("nested", { isComponent: true });
-
-  const titleRaw = getAttrs("title");
-
-  const titleAttrs = computed(() => (isActive) => ({
-    ...titleRaw,
-    class: cx([titleRaw.value.class, isActive !== undefined && !isActive ? titleCrossed : ""]),
-  }));
-
-  return {
-    config,
-    wrapperAttrs,
-    dividerAttrs,
-    emptyAttrs,
-    draggableAttrs,
-    nestedAttrs,
-    itemWrapperAttrs,
-    itemAttrs,
-    iconDragAttrs,
-    titleAttrs,
-    customActionsAttrs,
-    iconDeleteAttrs,
-    iconEditAttrs,
-    hasSlotContent,
-  };
-}

package/ui.data-list/configs/default.config.js

@@ -1,32 +0,0 @@
-export default /*tw*/ {
-  wrapper: "",
-  draggable: "",
-  draggableDrag: "bg-gray-100",
-  draggableGhost: "bg-opacity-50",
-  itemWrapper: "group/item-wrapper",
-  item: `
-    group/item
-    border-b border-gray-100
-    group-last/item-wrapper:border-b-0 group-[]/nested:group-last/item-wrapper:border-b
-    py-4 space-x-4 flex flex-auto items-center justify-between
-  `,
-  iconDrag: "icon-drag cursor-move opacity-100 fill-gray-400 md:fill-gray-500",
-  iconDragName: "drag_indicator",
-  title: "text-base font-normal text-gray-900 flex-auto pt-px",
-  titleCrossed: "line-through",
-  customActions: `
-    space-x-5 opacity-50 md:flex md:items-center md:opacity-0
-    group-hover/item:md:block group-hover/item:opacity-100
-  `,
-  iconDelete: "hidden md:block md:opacity-0 group-hover/item:md:opacity-100",
-  iconDeleteName: "delete",
-  iconEdit: "fill-gray-500 opacity-50",
-  iconEditName: "edit_note",
-  nested: "group/nested ml-6",
-  defaultVariants: {
-    animationDuration: 200,
-    nesting: false,
-    upperlined: false,
-    hideEmptyStateForNesting: false,
-  },
-};

package/ui.data-list/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 UDataListName = "UDataList";