vueless 0.0.1

package/ui.text-alert/index.stories.js

@@ -0,0 +1,124 @@
+import { getArgTypes, getSlotNames } from "vueless/service.storybook";
+
+import UAlert from "vueless/ui.text-alert";
+import URow from "vueless/ui.container-row";
+export default {
+  title: "Text & Content / Alert",
+  component: UAlert,
+  args: {
+    text: "U Hint",
+    slotTemplate: `
+      <template #default>
+        <p>
+          <b>Lorem ipsum dolor sit amet,</b>
+          <u>consectetur adipiscing elit,</u>
+          <em>sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua.</em>
+          <a href="https://uk.wikipedia.org/wiki/Lorem_ipsum" target="_blank">Wikipedia</a>
+        </p>
+      </template>
+    `,
+  },
+  argTypes: {
+    ...getArgTypes(UAlert.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UAlert },
+  setup() {
+    const slots = getSlotNames(UAlert.name);
+
+    return { args, slots };
+  },
+  template: `
+    <UAlert v-bind="args">
+      ${args.slotTemplate || ""}
+    </UAlert>
+  `,
+});
+
+const ColorsTemplate = (args, { argTypes }) => ({
+  components: { UAlert, URow },
+  setup() {
+    return {
+      args,
+      colors: argTypes.color.options,
+    };
+  },
+  template: `
+    <URow>
+      <UAlert
+        v-for="(color, index) in colors"
+        :color="color"
+        v-bind="args"
+        :key="index"
+      >
+        ${args.slotTemplate}
+      </UAlert>
+    </URow>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const colors = ColorsTemplate.bind({});
+colors.args = {
+  closeButton: true,
+  slotTemplate: `
+     <template #default>
+       text
+     </template>
+  `,
+};
+
+export const closeButton = DefaultTemplate.bind({});
+closeButton.args = {
+  closeButton: true,
+  slotTemplate: `
+     <template #default>
+       some text
+     </template>
+  `,
+};
+
+export const paragraphs = DefaultTemplate.bind({});
+paragraphs.args = {
+  slotTemplate: `
+    <template #default>
+      <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>
+
+    </template>
+    `,
+};
+
+export const list = DefaultTemplate.bind({});
+list.args = {
+  slotTemplate: `
+    <template #default>
+      <URow>
+        <ul>
+          <li> Lorem ipsum dolor </li>
+          <li> Lorem ipsum dolor </li>
+          <li> Lorem ipsum dolor </li>
+        </ul>
+
+        <ol>
+          <li> Lorem ipsum dolor </li>
+          <li> Lorem ipsum dolor </li>
+          <li> Lorem ipsum dolor </li>
+        </ol>
+      </URow>
+    </template>
+    `,
+};

package/ui.text-alert/index.vue

@@ -0,0 +1,236 @@
+<template>
+  <t-alert
+    class="mono-hint"
+    :class="colorClass"
+    show
+    :timeout="timeout"
+    :data-cy="dataCy"
+    @hidden="onHidden"
+  >
+    <div class="mono-hint-wrapper">
+      <!-- @slot Use it to add something inside. -->
+      <div v-if="!$slots.default" v-html="html" />
+      <slot />
+    </div>
+  </t-alert>
+</template>
+
+<script>
+import TAlert from "vueless/library.vue-tailwind-3/t-alert";
+
+export default {
+  name: "UAlert",
+
+  components: {
+    TAlert,
+  },
+
+  props: {
+    /**
+     * Set html to render inside of UAlert.
+     */
+    html: {
+      type: String,
+      default: undefined,
+    },
+
+    /**
+     * Set text hint color.
+     * @values gray, red, orange, yellow, green, blue, violet, fuchsia
+     */
+    color: {
+      type: String,
+      default: "gray",
+    },
+
+    /**
+     * Set text hint timeout.
+     */
+    timeout: {
+      type: Number,
+      default: 0,
+    },
+
+    /**
+     * Show / hide close button.
+     */
+    closeButton: {
+      type: Boolean,
+      default: false,
+    },
+
+    /**
+     * Sets data-cy attribute for automated testing.
+     */
+    dataCy: {
+      type: String,
+      default: "",
+    },
+  },
+
+  emits: ["hidden"],
+
+  computed: {
+    colorClass() {
+      return this.closeButton
+        ? `mono-hint-${this.color}-active`
+        : [`mono-hint-${this.color}-disable`, "mono-hint-button-disabled"];
+    },
+  },
+
+  methods: {
+    onHidden() {
+      this.$emit("hidden", this.message);
+    },
+  },
+};
+</script>
+
+<style lang="postcss" scoped>
+.mono-hint {
+  @apply rounded-lg border-0 p-4;
+
+  &-wrapper {
+    @apply text-xs leading-normal;
+
+    :deep(h3) {
+      @apply font-medium;
+      @apply mb-0.5;
+    }
+
+    :deep(p) {
+      @apply font-normal;
+    }
+
+    :deep(b) {
+      @apply font-bold;
+    }
+
+    :deep(i) {
+      @apply italic;
+    }
+
+    :deep(ul) {
+      @apply font-normal leading-[1.125rem];
+      @apply list-inside list-disc;
+      @apply ml-2;
+    }
+
+    :deep(a) {
+      @apply block;
+      @apply font-medium;
+      @apply mt-2.5;
+    }
+  }
+
+  &-button-disabled {
+    &:deep(button) {
+      @apply hidden;
+    }
+  }
+
+  &-gray {
+    &-active,
+    &-disable {
+      @apply bg-gray-100 text-gray-500;
+    }
+
+    &-active {
+      &:deep(button) {
+        @apply text-gray-500 hover:bg-gray-200;
+      }
+    }
+  }
+
+  &-red {
+    &-active,
+    &-disable {
+      @apply bg-red-50 text-red-700;
+    }
+
+    &-active {
+      &:deep(button) {
+        @apply text-red-500 hover:bg-red-200;
+      }
+    }
+  }
+
+  &-orange {
+    &-active,
+    &-disable {
+      @apply bg-orange-50 text-orange-700;
+    }
+
+    &-active {
+      &:deep(button) {
+        @apply text-orange-500 hover:bg-orange-200;
+      }
+    }
+  }
+
+  &-yellow {
+    &-active,
+    &-disable {
+      @apply bg-yellow-50 text-yellow-700;
+    }
+
+    &-active {
+      &:deep(button) {
+        @apply text-yellow-500 hover:bg-yellow-200;
+      }
+    }
+  }
+
+  &-green {
+    &-active,
+    &-disable {
+      @apply bg-green-50 text-green-700;
+    }
+
+    &-active {
+      &:deep(button) {
+        @apply text-green-500 hover:bg-green-200;
+      }
+    }
+  }
+
+  &-blue {
+    &-active,
+    &-disable {
+      @apply bg-blue-50 text-blue-700;
+    }
+
+    &-active {
+      &:deep(button) {
+        @apply text-blue-500 hover:bg-blue-200;
+      }
+    }
+  }
+
+  &-violet {
+    &-active,
+    &-disable {
+      @apply bg-violet-50 text-violet-700;
+    }
+
+    &-active {
+      &:deep(button) {
+        @apply text-violet-500 hover:bg-violet-200;
+      }
+    }
+  }
+
+  &-fuchsia {
+    &-active,
+    &-disable {
+      @apply bg-fuchsia-50 text-fuchsia-700;
+    }
+
+    &-active {
+      &:deep(button) {
+        @apply text-fuchsia-500 hover:bg-fuchsia-200;
+      }
+    }
+  }
+}
+</style>

package/ui.text-block/index.stories.js

@@ -0,0 +1,111 @@
+import { getArgTypes, getSlotNames } from "vueless/service.storybook";
+
+import UText from "vueless/ui.text-block";
+import URow from "vueless/ui.container-row";
+
+export default {
+  title: "Text & Content / Text",
+  component: UText,
+  argTypes: {
+    ...getArgTypes(UText.name),
+  },
+  args: {
+    slotTemplate: `
+    <template #default>
+      <p>
+        <b>Lorem ipsum dolor sit amet</b><u>, consectetur adipiscing elit,
+        </u><em> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</em>
+        <a href="https://uk.wikipedia.org/wiki/Lorem_ipsum" target="_blank">Wikipedia</a>
+      </p>
+    </template>
+  `,
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UText },
+  setup() {
+    const slots = getSlotNames(UText.name);
+
+    return { args, slots };
+  },
+  template: `
+    <UText v-bind="args" >
+      ${args.slotTemplate}
+    </UText>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes }) => ({
+  components: { UText, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <URow>
+      <UText
+        v-for="(size, index) in sizes"
+        :size="size"
+        v-bind="args"
+        :key="index"
+      >
+        ${args.slotTemplate}
+      </UText>
+    </URow>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const sizes = SizesTemplate.bind({});
+sizes.args = {};
+
+export const paragraphs = DefaultTemplate.bind({});
+paragraphs.args = {
+  slotTemplate: `
+    <template #default>
+      <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>
+        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>
+    </template>
+  `,
+};
+
+export const list = DefaultTemplate.bind({});
+list.args = {
+  slotTemplate: `
+     <template #default>
+       <URow>
+         <ul>
+           <li> Lorem ipsum dolor </li>
+           <li> Lorem ipsum dolor </li>
+           <li> Lorem ipsum dolor </li>
+         </ul>
+
+         <ol>
+           <li> Lorem ipsum dolor </li>
+           <li> Lorem ipsum dolor </li>
+           <li> Lorem ipsum dolor </li>
+         </ol>
+       </URow>
+     </template>
+  `,
+};

package/ui.text-block/index.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="mono-text-block" :class="textBlockClasses" :data-cy="dataCy">
+    <!-- @slot Use it to add something. -->
+    <div v-if="!$slots.default" v-html="html" />
+    <slot />
+  </div>
+</template>
+
+<script>
+import { useSlots } from "vue";
+
+export default {
+  name: "UText",
+
+  props: {
+    /**
+     * Set html to render inside the component.
+     */
+    html: {
+      type: String,
+      default: undefined,
+    },
+
+    /**
+     * Set text block size.
+     * @values xs, sm, md, lg
+     */
+    size: {
+      type: String,
+      default: "md",
+    },
+
+    /**
+     * Set component align.
+     * @values left , center, right
+     */
+    align: {
+      type: String,
+      default: "left",
+    },
+
+    /**
+     * Sets data-cy attribute for automated testing.
+     */
+    dataCy: {
+      type: String,
+      default: "",
+    },
+  },
+
+  setup() {
+    const slots = useSlots();
+
+    return { slots };
+  },
+
+  computed: {
+    textBlockClasses() {
+      const size = `mono-text-block-size-${this.size}`;
+      const align = `mono-text-block-position-${this.align}`;
+
+      return [size, align];
+    },
+  },
+};
+</script>
+
+<style lang="postcss" scoped>
+.mono-text-block {
+  @apply space-y-4;
+  @apply font-normal leading-normal;
+
+  :deep(a) {
+    @apply underline;
+    @apply transition duration-100 ease-in-out;
+
+    &:hover {
+      @apply opacity-80;
+    }
+  }
+
+  :deep(b) {
+    @apply font-bold;
+  }
+
+  :deep(i) {
+    @apply italic;
+  }
+
+  :deep(ul),
+  :deep(ol) {
+    @apply font-normal leading-[1.125rem];
+    @apply list-inside;
+    @apply ml-2;
+  }
+
+  :deep(ul) {
+    @apply list-disc;
+  }
+
+  :deep(ol) {
+    @apply list-decimal;
+  }
+
+  &-size {
+    &-xs {
+      @apply text-xs leading-tight;
+    }
+
+    &-sm {
+      @apply text-sm leading-tight;
+    }
+
+    &-md {
+      @apply text-base leading-tight;
+    }
+
+    &-lg {
+      @apply text-lg leading-tight;
+    }
+  }
+
+  &-position {
+    &-left {
+      @apply text-left;
+    }
+
+    &-center {
+      @apply text-center;
+    }
+
+    &-right {
+      @apply text-right;
+    }
+  }
+}
+</style>

package/ui.text-empty/configs/default.config.js

@@ -0,0 +1,28 @@
+export default /*ui*/ {
+  wrapper: "flex flex-col items-center w-full bg-center",
+  header: "mb-4 flex justify-center",
+  footer: "mt-4 flex justify-center",
+  title: {
+    base: "mb-2 font-medium text-center",
+    variants: {
+      size: {
+        sm: "text-base",
+        md: "text-lg",
+        lg: "text-xl",
+      },
+    },
+  },
+  description: {
+    base: "text-center",
+    variants: {
+      size: {
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+};