vueless 0.0.2 → 0.0.4

package/ui.form-date-picker-range/components/VariantButton.vue

@@ -1,136 +0,0 @@
-<template>
-  <div class="date-button" :data-cy="dataCy">
-    <t-button
-      class="arrow arrow-left"
-      :data-cy="`${dataCy}-prev`"
-      @click="onClickShiftRange('prev')"
-    >
-      <UIcon class="icon" size="sm" name="arrow_back_ios_new" />
-    </t-button>
-
-    <t-button
-      :id="id"
-      class="date-current"
-      :text="title"
-      :data-cy="`${dataCy}-title`"
-      @blur="onBlur"
-      @click="onClickRangeSet"
-    />
-
-    <t-button
-      class="arrow arrow-right"
-      :data-cy="`${dataCy}-next`"
-      @click="onClickShiftRange('next')"
-    >
-      <UIcon class="icon" size="sm" name="arrow_forward_ios" />
-    </t-button>
-  </div>
-</template>
-
-<script>
-import UIcon from "vueless/ui.image-icon";
-import TButton from "vueless/library.vue-tailwind-3/t-button";
-
-export default {
-  components: {
-    UIcon,
-    TButton,
-  },
-
-  props: {
-    title: {
-      type: String,
-      default: "",
-    },
-
-    id: {
-      type: String,
-      default: "",
-    },
-
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  emits: ["clickShiftRange", "clickRangeSet", "blur"],
-
-  methods: {
-    onClickShiftRange(action) {
-      this.$emit("clickShiftRange", action);
-    },
-
-    onClickRangeSet() {
-      this.$emit("clickRangeSet");
-    },
-
-    onBlur() {
-      this.$emit("blur");
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.date {
-  &-button {
-    @apply flex rounded-lg max-md:justify-between;
-    @apply h-full;
-
-    &:active {
-      @apply bg-opacity-5;
-    }
-
-    &:focus-within {
-      @apply ring-4 ring-gray-600 ring-opacity-15;
-    }
-  }
-
-  &-current {
-    @apply rounded-none shadow-none;
-    @apply text-base font-medium text-gray-900;
-    @apply border-0 bg-gray-900 bg-opacity-5;
-    @apply shrink-0 flex-grow;
-
-    &:hover {
-      @apply bg-opacity-10 bg-gray-600/15 ring-gray-600 ring-opacity-15;
-    }
-
-    &:focus {
-      @apply border-0 ring-0 bg-gray-600/15 ring-gray-600 ring-opacity-15;
-    }
-  }
-}
-
-.arrow {
-  @apply flex items-center;
-  @apply bg-gray-900 bg-opacity-5 shadow-none;
-  @apply border-0;
-  @apply py-[0.71875rem];
-
-  &:hover {
-    @apply bg-opacity-10 bg-gray-600/15 ring-gray-600 ring-opacity-15;
-  }
-
-  &:focus {
-    @apply border-0 ring-0 bg-gray-600/15 ring-gray-600 ring-opacity-15;
-  }
-
-  &-left {
-    @apply rounded-l-lg rounded-r-none;
-  }
-
-  &-right {
-    @apply rounded-l-none rounded-r-lg;
-  }
-}
-
-.icon {
-  @apply cursor-pointer;
-
-  &:deep(g [fill]) {
-    @apply fill-current text-gray-900;
-  }
-}
-</style>

package/ui.form-date-picker-range/components/VariantInput.vue

@@ -1,101 +0,0 @@
-<template>
-  <div
-    :id="id"
-    class="date-input"
-    tabindex="1"
-    :data-cy="dataCy"
-    @click="onClickRangeSet"
-    @blur="onBlur"
-  >
-    <div>
-      <div class="date-input-label">{{ label }}</div>
-
-      <div class="date-input-value">{{ modelValue }}</div>
-
-      <div v-if="!modelValue" class="date-input-placeholder">{{ placeholder }}</div>
-    </div>
-
-    <div @click.stop>
-      <slot name="right" />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    label: {
-      type: String,
-      default: "",
-    },
-
-    modelValue: {
-      type: String,
-      default: "",
-    },
-
-    placeholder: {
-      type: String,
-      default: "",
-    },
-
-    id: {
-      type: String,
-      default: "",
-    },
-
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  emits: ["clickRangeSet", "blur"],
-
-  methods: {
-    onClickRangeSet() {
-      this.$emit("clickRangeSet");
-    },
-
-    onBlur() {
-      this.$emit("blur");
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.date {
-  &-input {
-    @apply flex flex-col max-md:gap-3 md:flex-row md:items-center md:justify-between;
-    @apply relative cursor-text;
-    @apply rounded-lg border border-gray-300 bg-white;
-    @apply px-4 py-2.5;
-
-    &:hover {
-      @apply border-gray-400;
-    }
-
-    &:focus {
-      @apply border-gray-500 ring-4 ring-gray-600 ring-opacity-15;
-    }
-
-    &:focus-within {
-      @apply outline-0;
-    }
-
-    &-value {
-      @apply text-base font-normal text-gray-900;
-    }
-
-    &-placeholder {
-      @apply text-base font-normal text-gray-400;
-    }
-
-    &-label {
-      @apply pb-0.5;
-      @apply text-sm font-normal text-gray-500;
-    }
-  }
-}
-</style>

package/ui.form-date-picker-range/index.stories.js

@@ -1,93 +0,0 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
-
-import UDatePickerRange from "vueless/ui.form-date-picker-range";
-import URow from "vueless/ui.container-row";
-
-export default {
-  title: "Form Inputs & Controls / Date Picker Range",
-  component: UDatePickerRange,
-  args: {
-    value: {
-      from: 1651813634,
-      to: 1654492034,
-    },
-  },
-  argTypes: {
-    ...getArgTypes(UDatePickerRange.name),
-  },
-  parameters: {
-    docs: {
-      story: {
-        height: "580px",
-      },
-    },
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UDatePickerRange },
-  setup() {
-    const slots = getSlotNames(UDatePickerRange.name);
-
-    return { args, slots };
-  },
-  template: `
-    <UDatePickerRange v-bind="args" v-model="args.value">
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
-    </UDatePickerRange>
-  `,
-});
-
-const SlotTemplate = (args) => ({
-  components: { UDatePickerRange },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UDatePickerRange v-bind="args" v-model="args.value">
-      ${args.slotTemplate}
-    </UDatePickerRange>
-  `,
-});
-
-const VariantsTemplate = (args, { argTypes }) => ({
-  components: { UDatePickerRange, URow },
-  setup() {
-    return {
-      args,
-      variants: argTypes.variant.options,
-    };
-  },
-  template: `
-    <URow>
-      <UDatePickerRange
-        v-for="(variant, index) in variants"
-        :variant="variant"
-        v-bind="args"
-        v-model="args.value"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const variants = VariantsTemplate.bind({});
-variants.args = {};
-
-export const label = DefaultTemplate.bind({});
-label.args = { variant: "input", label: "some label" };
-
-export const slotRight = SlotTemplate.bind({});
-slotRight.args = {
-  variant: "input",
-  slotTemplate: `
-    <template #right>
-      🤘
-    </template>
-  `,
-};