vueless 0.0.2 → 0.0.4

package/ui.button-expand/index.stories.js

@@ -1,44 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import UButtonExpand from "vueless/ui.button-expand";
-import UButtonExpandItem from "vueless/ui.button-expand-item";
-
-export default {
-  title: "Buttons & Links / Button Expand",
-  component: UButtonExpand,
-  argTypes: {
-    ...getArgTypes(UButtonExpand.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UButtonExpand, UButtonExpandItem },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UButtonExpand v-bind="args">
-      ${args.slotTemplate}
-    </UButtonExpand>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {
-  slotTemplate: `
-    <template #default>
-      <UButtonExpandItem
-        text="Expand item 1"
-        icon-name="star"
-      />
-      <UButtonExpandItem
-        text="Expand item 2"
-        icon-name="star-fill"
-      />
-      <UButtonExpandItem
-        text="Expand item 3"
-        icon-name="star-fill"
-      />
-    </template>
-  `,
-};

package/ui.button-expand/index.vue

@@ -1,22 +0,0 @@
-<template>
-  <div class="empty:hidden" :data-cy="dataCy">
-    <!-- @slot Use it to add button expand item. -->
-    <slot />
-  </div>
-</template>
-
-<script>
-export default {
-  name: "UButtonExpand",
-
-  props: {
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-};
-</script>

package/ui.button-expand-item/index.stories.js

@@ -1,69 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import UButtonExpandItem from "vueless/ui.button-expand-item";
-import URow from "vueless/ui.container-row";
-
-export default {
-  title: "Buttons & Links / Button Expand Item",
-  component: UButtonExpandItem,
-  args: {
-    text: "Button Expand Item",
-    iconName: "star-fill",
-  },
-  argTypes: {
-    ...getArgTypes(UButtonExpandItem.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UButtonExpandItem },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UButtonExpandItem v-bind="args" />
-  `,
-});
-
-const SizesTemplate = (args, { argTypes }) => ({
-  components: { UButtonExpandItem, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <UButtonExpandItem
-        v-for="(size, index) in sizes"
-        :size="size"
-        :text="size"
-        v-bind="args"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const Sizes = SizesTemplate.bind({});
-Sizes.args = {};
-
-export const Disabled = DefaultTemplate.bind({});
-Disabled.args = { disabled: true };
-
-export const Icon = DefaultTemplate.bind({});
-Icon.args = {
-  slotTemplate: `
-    <template #left>
-      <UIcon
-        name="star"
-        color="gray"
-        size="md"
-       />
-    </template>
-  `,
-};

package/ui.button-expand-item/index.vue

@@ -1,154 +0,0 @@
-<template>
-  <div class="mono-expand-button-item">
-    <t-button
-      class="mono-expand-button-item-button"
-      :disabled="disabled"
-      :class="sizeClass"
-      :data-cy="dataCy"
-      @click="onClick"
-    >
-      <UIcon :name="iconName" class="icon" color="gray" />
-
-      <slot>
-        <span class="mono-expand-button-item-button-text">{{ text }}</span>
-      </slot>
-    </t-button>
-
-    <div class="mono-expand-button-item-line" />
-  </div>
-</template>
-
-<script>
-import UIcon from "vueless/ui.image-icon";
-import TButton from "vueless/library.vue-tailwind-3/t-button";
-
-export default {
-  name: "UButtonExpandItem",
-
-  components: {
-    UIcon,
-    TButton,
-  },
-
-  props: {
-    /**
-     * The size of the button.
-     * @values sm, md, lg
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * Set button text.
-     */
-    text: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Make button inactive.
-     */
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Icon SVG data source path.
-     */
-    iconName: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  emits: ["click"],
-
-  computed: {
-    sizeClass() {
-      return `size-${this.size}`;
-    },
-  },
-
-  methods: {
-    onClick() {
-      this.$emit("click");
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.mono-expand-button-item {
-  &:last-child {
-    .mono-expand-button-item-line {
-      @apply hidden;
-    }
-  }
-
-  .mono-expand-button-item-button {
-    @apply flex items-center;
-    @apply font-normal text-gray-900;
-    @apply w-full text-left;
-    @apply rounded-lg shadow-none outline-none;
-    @apply border bg-transparent;
-
-    &-text {
-      @apply border-b border-transparent;
-    }
-
-    .icon {
-      @apply mr-3;
-    }
-
-    &:hover {
-      .mono-expand-button-item-button-text {
-        @apply transition duration-100 ease-in-out;
-        @apply border-b border-dashed border-gray-900;
-      }
-    }
-
-    &:focus {
-      @apply border-transparent;
-      @apply ring-0;
-    }
-
-    &:disabled {
-      @apply text-gray-400;
-    }
-  }
-
-  .mono-expand-button-item-line {
-    @apply border border-l-0 border-r-0 border-t-0 border-gray-200;
-    @apply my-2;
-  }
-}
-
-.size {
-  &-sm {
-    @apply text-sm;
-    @apply px-3;
-  }
-
-  &-md {
-    @apply text-base;
-    @apply px-4;
-  }
-
-  &-lg {
-    @apply text-lg;
-    @apply px-5;
-  }
-}
-</style>

package/ui.button-group/index.stories.js

@@ -1,104 +0,0 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
-
-import UButtonGroup from "vueless/ui.button-group";
-import UIcon from "vueless/ui.image-icon";
-import UButtonGroupItem from "vueless/ui.button-group-item";
-import URow from "vueless/ui.container-row";
-export default {
-  title: "Buttons & Links / Button Group",
-  component: UButtonGroup,
-  argTypes: {
-    ...getArgTypes(UButtonGroup.name),
-    modelValue: { control: { type: "text" } },
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UButtonGroup },
-  setup() {
-    const groupOptions = [
-      { value: "11", label: "label 1" },
-      { value: "12", label: "label 2" },
-      { value: "13", label: "label 3" },
-      { value: "14", label: "label 4" },
-    ];
-
-    return { args, groupOptions };
-  },
-  template: `
-    <UButtonGroup :options="groupOptions" name="defaultTemplate" v-bind="args"/>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes }) => ({
-  components: { UButtonGroup, URow },
-  setup() {
-    const slots = getSlotNames(UButtonGroup.name);
-
-    return {
-      args,
-      slots,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <UButtonGroup
-        v-for="(size, index) in sizes"
-        :size="size"
-        :text="size"
-        :options="[
-          { value: size + 1, label: size },
-          { value: size + 2, label: size },
-        ]"
-        v-bind="args"
-        :key="index"
-        name="sizeTemplate"
-      >
-        <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-          <template v-if="args[slot]">{{ args[slot] }}</template>
-        </template>
-      </UButtonGroup>
-    </URow>
-  `,
-});
-
-const SlotTemplate = (args) => ({
-  components: { UButtonGroup, UIcon, UButtonGroupItem },
-  setup() {
-    return {
-      args,
-      selected: "55",
-    };
-  },
-  template: `
-    <UButtonGroup v-model="selected">
-      ${args.slotTemplate}
-    </UButtonGroup>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {
-  name: "first name",
-};
-
-export const slotDefault = SlotTemplate.bind({});
-slotDefault.args = {
-  name: "third name",
-  slotTemplate: `
-    <template #default>
-      <UButtonGroupItem label="label" />
-    </template>
-  `,
-};
-
-export const sizes = SizesTemplate.bind({});
-sizes.args = {
-  name: "second name",
-};
-
-export const wide = DefaultTemplate.bind({});
-wide.args = {
-  wide: true,
-};

package/ui.button-group/index.vue

@@ -1,165 +0,0 @@
-<template>
-  <div class="mono-button-group" :class="componentClasses" :data-cy="dataCy">
-    <slot>
-      <UButtonGroupItem
-        v-for="(item, index) in options"
-        :key="item.value"
-        :value="item.value"
-        :size="size"
-        :label="item.label"
-        :data-cy="`${dataCy}-item-${index}`"
-      />
-    </slot>
-  </div>
-</template>
-
-<script>
-import UButtonGroupItem from "vueless/ui.button-group-item";
-
-export default {
-  name: "UButtonGroup",
-
-  components: { UButtonGroupItem },
-
-  provide() {
-    return {
-      setButtonGroupSelectedItem: (value) => {
-        this.selectedItem = value;
-      },
-
-      getButtonGroupName: () => {
-        return this.name;
-      },
-
-      getButtonGroupSize: () => {
-        return this.size;
-      },
-
-      getButtonGroupValue: () => {
-        return this.selectedItem;
-      },
-    };
-  },
-
-  props: {
-    /**
-     * Set buttons name.
-     */
-    name: {
-      type: String,
-      required: true,
-      default: "",
-    },
-
-    /**
-     * Set data for buttons.
-     */
-    options: {
-      type: Array,
-      default: () => [],
-    },
-
-    /**
-     * Set current value.
-     */
-    modelValue: {
-      type: [String, Number],
-      default: "",
-    },
-
-    /**
-     * The size of the buttons.
-     * @values xs ,sm, md, lg
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * Fit buttons to the parent block.
-     */
-    wide: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  emits: ["update:modelValue"],
-
-  computed: {
-    selectedItem: {
-      get() {
-        return this.modelValue;
-      },
-      set(value) {
-        this.$emit("update:modelValue", value);
-      },
-    },
-
-    componentClasses() {
-      const wide = this.wide ? "mono-button-group-wide" : "";
-
-      return [wide];
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.mono-button-group {
-  @apply flex space-x-px;
-
-  &-wide {
-    &:deep(.mono-button-group-item) {
-      @apply w-full;
-
-      .label {
-        @apply w-full justify-center;
-      }
-    }
-  }
-
-  &:deep(.mono-button-group-item) {
-    &:first-child {
-      .label {
-        @apply rounded-l-lg;
-      }
-    }
-
-    &:last-child {
-      .label {
-        @apply rounded-r-lg;
-      }
-    }
-  }
-
-  &:deep(.mono-link-wrapper) {
-    .mono-button-group-item {
-      .label {
-        @apply rounded-none;
-      }
-    }
-
-    &:first-child {
-      .label {
-        @apply rounded-l-lg;
-      }
-    }
-
-    &:last-child {
-      .label {
-        @apply rounded-r-lg;
-      }
-    }
-  }
-}
-</style>

package/ui.button-group-item/index.stories.js

@@ -1,74 +0,0 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
-
-import UButtonGroupItem from "vueless/ui.button-group-item";
-import UIcon from "vueless/ui.image-icon";
-
-export default {
-  title: "Buttons & Links / Button Group Item",
-  component: UButtonGroupItem,
-  args: {
-    value: "1",
-    label: "Label",
-  },
-  argTypes: {
-    ...getArgTypes(UButtonGroupItem.name),
-    value: { control: { type: "text" } },
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UButtonGroupItem },
-  setup() {
-    const slots = getSlotNames(UButtonGroupItem.name);
-
-    return { args, slots };
-  },
-  template: `
-    <UButtonGroupItem name="defaultTemplate" v-bind="args">
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
-    </UButtonGroupItem>
-  `,
-});
-
-const SlotTemplate = (args) => ({
-  components: { UButtonGroupItem, UIcon },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UButtonGroupItem label="Label" v-bind="args">
-      ${args.slotTemplate}
-    </UButtonGroupItem>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const slotLeft = SlotTemplate.bind({});
-slotLeft.args = {
-  slotTemplate: `
-    <template #left>
-      <UIcon
-        name="star"
-        color="black"
-        size="md"
-      />
-    </template>
-  `,
-};
-
-export const slotRight = SlotTemplate.bind({});
-slotRight.args = {
-  slotTemplate: `
-    <template #right>
-      <UIcon
-        name="star"
-        color="black"
-        size="md"
-       />
-    </template>
-  `,
-};