vueless 0.0.2 → 0.0.4

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

@@ -1,106 +0,0 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
-
-import UEmpty from "vueless/ui.text-empty";
-import UButton from "vueless/ui.button";
-import UIcon from "vueless/ui.image-icon";
-import URow from "vueless/ui.container-row";
-
-export default {
-  title: "Text & Content / Empty",
-  component: UEmpty,
-  args: {
-    title: "No contacts",
-    description: "There is no contacts in the list.",
-  },
-  argTypes: {
-    ...getArgTypes(UEmpty.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UEmpty },
-  setup() {
-    const slots = getSlotNames(UEmpty.name);
-
-    return { args, slots };
-  },
-  template: `
-    <UEmpty v-bind="args">
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
-    </UEmpty>
-  `,
-});
-
-const SlotTemplate = (args) => ({
-  components: { UEmpty, UIcon, UButton },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UEmpty v-bind="args">
-      ${args.slotTemplate}
-    </UEmpty>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes }) => ({
-  components: { UEmpty, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <UEmpty
-        v-for="(size, index) in sizes"
-        v-bind="args"
-        :size="size"
-        :title="size"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const sizes = SizesTemplate.bind({});
-sizes.args = { title: "" };
-
-export const slotHeader = SlotTemplate.bind({});
-slotHeader.args = {
-  slotTemplate: `
-    <template #header>
-      <UIcon
-        name="person"
-        color="blue"
-        variant="dark"
-        size="2xl"
-        pill
-       />
-    </template>
-  `,
-};
-
-export const slotDefault = SlotTemplate.bind({});
-slotDefault.args = {
-  slotTemplate: `
-    <template #default>
-      <span>Some unique <b><code>HTML</code></b> or <b><code>Components</code></b>...</span>
-    </template>
-  `,
-};
-
-export const slotFooter = SlotTemplate.bind({});
-slotFooter.args = {
-  slotTemplate: `
-    <template #footer>
-        <UButton text="Add new one" size="sm" variant="thirdary" filled />
-    </template>
-  `,
-};

package/ui.text-empty/services/variant.service.js

@@ -1,22 +0,0 @@
-import { cva } from "vueless/service.ui";
-
-export default class VariantService {
-  static get(ui) {
-    const { title, description } = ui;
-
-    const titleVariants = cva({
-      base: title.base,
-      variants: title.variants,
-    });
-
-    const descriptionVariants = cva({
-      base: description.base,
-      variants: description.variants,
-    });
-
-    return {
-      titleVariants,
-      descriptionVariants,
-    };
-  }
-}

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

@@ -1,60 +0,0 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
-
-import UField from "vueless/ui.text-field";
-import URow from "vueless/ui.container-row";
-
-export default {
-  title: "Text & Content / Field",
-  component: UField,
-  args: {
-    label: "Label",
-    value: "Value",
-  },
-  argTypes: {
-    ...getArgTypes(UField.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UField },
-  setup() {
-    const slots = getSlotNames(UField.name);
-
-    return { args, slots };
-  },
-  template: `
-    <UField v-bind="args">
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
-    </UField>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes }) => ({
-  components: { UField, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <UField
-        v-for="(size, index) in sizes"
-        :size="size"
-        :value="size"
-        labe="Label"
-        v-bind="args"
-        :key="index"
-       />
-    </URow>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const Sizes = SizesTemplate.bind({});
-Sizes.args = {};

package/ui.text-field/index.vue

@@ -1,109 +0,0 @@
-<template>
-  <div class="mono-text-field" :class="fieldClasses" :data-cy="dataCy">
-    <div class="mono-text-field-label">
-      {{ label }}
-    </div>
-
-    <!-- @slot Use it to change structure. -->
-    <slot :value="value">
-      <div class="mono-text-field-value">
-        {{ value }}
-      </div>
-    </slot>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "UField",
-
-  props: {
-    /**
-     * Set label.
-     */
-    label: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set value.
-     */
-    value: {
-      type: String,
-      default: "–",
-    },
-
-    /**
-     * Set size
-     * @values sm, md, lg
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  computed: {
-    fieldClasses() {
-      const size = `mono-text-field-size-${this.size}`;
-
-      return [size];
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.mono-text-field {
-  @apply w-full;
-
-  &-label {
-    @apply font-normal text-gray-500;
-  }
-
-  &-value {
-    @apply font-normal text-gray-800;
-  }
-
-  &-size {
-    &-sm {
-      .mono-text-field-label {
-        @apply mb-0.5 text-xs;
-      }
-
-      .mono-text-field-value {
-        @apply text-sm;
-      }
-    }
-
-    &-md {
-      .mono-text-field-label {
-        @apply mb-1 text-sm;
-      }
-
-      .mono-text-field-value {
-        @apply text-base;
-      }
-    }
-
-    &-lg {
-      .mono-text-field-label {
-        @apply mb-1.5 text-base;
-      }
-
-      .mono-text-field-value {
-        @apply text-lg;
-      }
-    }
-  }
-}
-</style>

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

@@ -1,28 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import UFile from "vueless/ui.text-file";
-
-export default {
-  title: "Text & Content / File",
-  component: UFile,
-  args: {
-    text: "some file text",
-    url: "https://storybook.js.org/",
-  },
-  argTypes: {
-    ...getArgTypes(UFile.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UFile },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UFile v-bind="args" />
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};

package/ui.text-file/index.vue

@@ -1,102 +0,0 @@
-<template>
-  <ULink class="mono-file" :url="url" no-focus-ring target-blank :data-cy="dataCy">
-    <div class="mono-file-info">
-      <UIcon
-        name="description"
-        color="gray"
-        class="icon"
-        interactive
-        @focus="onFocus"
-        @blur="onBlur"
-      />
-      <span class="text" :class="focusClass">{{ text }}</span>
-    </div>
-  </ULink>
-</template>
-
-<script>
-import ULink from "vueless/ui.button-link";
-import UIcon from "vueless/ui.image-icon";
-
-export default {
-  name: "UFile",
-
-  components: {
-    ULink,
-    UIcon,
-  },
-
-  props: {
-    /**
-     * Set url link for the file.
-     */
-    url: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set text.
-     */
-    text: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  data() {
-    return {
-      focus: false,
-    };
-  },
-
-  computed: {
-    focusClass() {
-      return this.focus ? "focus" : "";
-    },
-  },
-
-  methods: {
-    onFocus() {
-      this.focus = true;
-    },
-
-    onBlur() {
-      this.focus = false;
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.mono-file {
-  &-info {
-    @apply flex items-start;
-  }
-
-  .icon {
-    @apply mr-3;
-  }
-
-  .text {
-    @apply whitespace-normal;
-    @apply pt-0.5;
-
-    &:hover {
-      @apply underline decoration-dashed underline-offset-4;
-    }
-  }
-}
-
-.focus {
-  @apply underline decoration-dashed underline-offset-4;
-}
-</style>

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

@@ -1,31 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import UFiles from "vueless/ui.text-files";
-
-export default {
-  title: "Text & Content / Files",
-  component: UFiles,
-  args: {
-    label: "Label",
-    options: [
-      { text: "some file text 1", url: "https://storybook.js.org/" },
-      { text: "some file text 2", url: "https://storybook.js.org/" },
-    ],
-  },
-  argTypes: {
-    ...getArgTypes(UFiles.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UFiles },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UFiles v-bind="args" />
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};

package/ui.text-files/index.vue

@@ -1,64 +0,0 @@
-<template>
-  <div :data-cy="dataCy" class="mono-files">
-    <h3 v-if="label" class="mono-files-label">{{ label }}</h3>
-
-    <div class="space-y-2">
-      <slot>
-        <UFile
-          v-for="(option, index) in options"
-          :key="option.text"
-          class="!block"
-          :text="option.text"
-          :url="option.url"
-          :data-cy="`${dataCy}-item-${index}`"
-        />
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script>
-import UFile from "vueless/ui.text-file";
-
-export default {
-  name: "UFiles",
-
-  components: {
-    UFile,
-  },
-
-  props: {
-    /**
-     * Set files label.
-     */
-    label: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set options for files.
-     */
-    options: {
-      type: Array,
-      default: () => [],
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.mono-files-label {
-  @apply block max-w-max;
-  @apply text-sm font-normal text-gray-500;
-  @apply mb-4;
-}
-</style>

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

@@ -1,110 +0,0 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
-
-import UHeader from "vueless/ui.text-header";
-import URow from "vueless/ui.container-row";
-
-export default {
-  title: "Text & Content / Header",
-  component: UHeader,
-  args: {
-    text: "Header",
-  },
-  argTypes: {
-    ...getArgTypes(UHeader.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UHeader },
-  setup() {
-    const slots = getSlotNames(UHeader.name);
-
-    return { args, slots };
-  },
-  template: `
-    <UHeader v-bind="args" />
-  `,
-});
-
-const ColorsTemplate = (args, { argTypes }) => ({
-  components: { UHeader, URow },
-  setup() {
-    return {
-      args,
-      colors: argTypes.color.options,
-    };
-  },
-  template: `
-    <URow>
-      <UHeader
-        v-for="(color, index) in colors"
-        :color="color"
-        :text="color"
-        v-bind="args"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes }) => ({
-  components: { UHeader, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <UHeader
-        v-for="(size, index) in sizes"
-        :size="size"
-        :text="getText(size)"
-        v-bind="args"
-        :key="index"
-      />
-    </URow>
-  `,
-  methods: {
-    getText(value) {
-      return `Header ${value}`;
-    },
-  },
-});
-
-const WeightTemplate = (args, { argTypes }) => ({
-  components: { UHeader, URow },
-  setup() {
-    return {
-      args,
-      weights: argTypes.weight.options,
-    };
-  },
-  template: `
-    <URow>
-      <UHeader
-        v-for="(weight, index) in weights"
-        :weight="weight"
-        :text="weight"
-        v-bind="args"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const Colors = ColorsTemplate.bind({});
-Colors.args = {};
-
-export const Underlined = SizesTemplate.bind({});
-Underlined.args = { underlined: true };
-
-export const Sizes = SizesTemplate.bind({});
-Sizes.args = {};
-
-export const Weights = WeightTemplate.bind({});
-Weights.args = {};