vueless 0.0.3 → 0.0.4

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

@@ -1,132 +0,0 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
-
-import UDatePicker from "vueless/ui.form-date-picker";
-import UIcon from "vueless/ui.image-icon";
-import URow from "vueless/ui.container-row";
-
-export default {
-  id: "3170",
-  title: "Form Inputs & Controls / Date Picker",
-  component: UDatePicker,
-  args: {
-    label: "Label",
-  },
-  argTypes: {
-    ...getArgTypes(UDatePicker.name),
-  },
-  parameters: {
-    docs: {
-      story: {
-        height: "380px",
-      },
-    },
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UDatePicker },
-  setup() {
-    const slots = getSlotNames(UDatePicker.name);
-
-    return { args, slots };
-  },
-  template: `
-    <UDatePicker v-bind="args" v-model="args.date">
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
-    </UDatePicker>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UDatePicker, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <UDatePicker
-        v-for="(size, index) in sizes"
-        :size="size"
-        :label="size"
-        v-bind="args"
-        :key="index"
-      >
-      </UDatePicker>
-    </URow>
-  `,
-});
-
-const SlotTemplate = (args) => ({
-  components: { UDatePicker, UIcon },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UDatePicker v-bind="args">
-      ${args.slotTemplate}
-    </UDatePicker>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = { date: 1645653600 };
-
-export const sizes = SizesTemplate.bind({});
-sizes.args = { label: "" };
-
-export const description = DefaultTemplate.bind({});
-description.args = { description: "some description" };
-
-export const disabled = DefaultTemplate.bind({});
-disabled.args = { disabled: true };
-
-export const error = DefaultTemplate.bind({});
-error.args = { error: "some error" };
-
-export const placeholder = DefaultTemplate.bind({});
-placeholder.args = { placeholder: "some placeholder" };
-
-export const DateFormat = DefaultTemplate.bind({});
-DateFormat.args = { dateFormat: "d.m.Y", userFormat: "d.m.Y", date: 1645653600 };
-
-export const Timepicker = DefaultTemplate.bind({});
-Timepicker.args = { timepicker: true, date: 1645653600 };
-
-export const MinMax = DefaultTemplate.bind({});
-MinMax.args = { minDate: "2022-02-22", maxDate: "2022-02-26", date: 1645653600 };
-
-export const slotIcon = SlotTemplate.bind({});
-slotIcon.args = {
-  slotTemplate: `
-    <template #right-icon>
-      <UIcon
-        name="star"
-        color="black"
-        size="md"
-       />
-    </template>
-  `,
-};
-
-export const slotRight = SlotTemplate.bind({});
-slotRight.args = {
-  slotTemplate: `
-    <template #right>
-        🤘🤘🤘
-    </template>
-  `,
-};
-
-export const slotLeft = SlotTemplate.bind({});
-slotRight.args = {
-  slotTemplate: `
-    <template #left>
-        🤘🤘🤘
-    </template>
-  `,
-};

package/ui.form-date-picker/index.vue

@@ -1,254 +0,0 @@
-<template>
-  <div class="relative">
-    <UInput
-      :id="id"
-      :key="isShownCalendar"
-      v-model="userFormatDate"
-      :config="inputAttrs.config"
-      :label="label"
-      :placeholder="placeholder"
-      :error="error"
-      :description="description"
-      readonly
-      :disabled="disabled"
-      :size="size"
-      v-bind="inputAttrs"
-      @focus="activate"
-    >
-      <template #left>
-        <slot name="left" />
-      </template>
-
-      <template #right-icon>
-        <slot name="right-icon" />
-      </template>
-
-      <template #right>
-        <slot name="right" />
-      </template>
-    </UInput>
-
-    <Transition v-bind="config.calendarTransition">
-      <UCalendar
-        v-show="isShownCalendar"
-        ref="calendarRef"
-        v-model="localValue"
-        v-model:view="customView"
-        tabindex="-1"
-        :timepicker="timepicker"
-        :date-format="dateFormat"
-        :user-format="userFormat"
-        :max-date="maxDate"
-        :min-date="minDate"
-        v-bind="calendarAttrs"
-        @keydown.esc="deactivate"
-        @userDateChange="onUserFormatDateChange"
-        @formattedDateChange="onFormattedDateChange"
-        @input="onInput"
-        @blur="onBlur"
-        @submit="onSubmit"
-      />
-    </Transition>
-  </div>
-</template>
-
-<script setup>
-import { computed, nextTick, ref } from "vue";
-import UIService, { getRandomId } from "vueless/service.ui";
-
-import useAttrs from "./composables/attrs.composable";
-
-import defaultConfig from "./configs/default.config";
-import { UDatePicker } from "./constants";
-
-import { VIEW } from "vueless/ui.form-calendar/constants";
-
-defineOptions({ name: "UDatePicker" });
-
-const props = defineProps({
-  /**
-   * Datepicker label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Datepicker placeholder.
-   */
-  placeholder: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Datepicker value (timestamp).
-   */
-  modelValue: {
-    type: Number,
-    default: null,
-  },
-
-  /**
-   * Min date in format date string or Date.
-   */
-  minDate: {
-    type: [String, Date],
-    default: UIService.get(defaultConfig, UDatePicker).default.minDate,
-  },
-
-  /**
-   * Max date in format date string or Date.
-   */
-  maxDate: {
-    type: [String, Date],
-    default: UIService.get(defaultConfig, UDatePicker).default.maxDate,
-  },
-
-  /**
-   * Disable component.
-   */
-  disabled: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UDatePicker).default.disabled,
-  },
-
-  /**
-   * Enable timepicker.
-   */
-  timepicker: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UDatePicker).default.timepicker,
-  },
-
-  /**
-   * Error message.
-   */
-  error: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Datepicker description.
-   */
-  description: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Datepicker size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: UIService.get(defaultConfig, UDatePicker).default.size,
-  },
-
-  /**
-   * Date format.
-   */
-  dateFormat: {
-    type: String,
-    default: UIService.get(defaultConfig, UDatePicker).default.dateFormat,
-  },
-
-  /**
-   * User friendly date format.
-   */
-  userFormat: {
-    type: String,
-    default: UIService.get(defaultConfig, UDatePicker).default.userFormat,
-  },
-
-  /**
-   * Unique element id.
-   * @ignore
-   */
-  id: {
-    type: String,
-    default: () => getRandomId(),
-  },
-
-  /**
-   * Component ui config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-const emit = defineEmits(["update:modelValue", "input"]);
-
-const isShownCalendar = ref(false);
-const userFormatDate = ref("");
-const formattedDate = ref("");
-const customView = ref(VIEW.day);
-
-const calendarRef = ref(null);
-
-defineExpose({
-  calendarRef,
-  userFormatDate,
-  formattedDate,
-});
-
-const localValue = computed({
-  get: () => props.modelValue,
-  set: (value) => emit("update:modelValue", value),
-});
-
-const { config, inputAttrs, calendarAttrs } = useAttrs(props, { isShownCalendar });
-
-function activate() {
-  isShownCalendar.value = true;
-
-  nextTick(() => calendarRef.value.wrapperRef.focus());
-}
-
-function deactivate() {
-  isShownCalendar.value = false;
-
-  customView.value = VIEW.day;
-}
-
-function onUserFormatDateChange(value) {
-  userFormatDate.value = value || "";
-}
-
-function onFormattedDateChange(value) {
-  formattedDate.value = value || "";
-}
-
-function onSubmit() {
-  deactivate();
-}
-
-function onBlur(event) {
-  const { relatedTarget } = event;
-
-  if (!calendarRef.value.wrapperRef.contains(relatedTarget)) deactivate();
-}
-
-function onInput() {
-  nextTick(() => {
-    calendarRef.value.wrapperRef.blur();
-    emit("input", {
-      userFormatDate: userFormatDate.value,
-      value: localValue.value,
-      formattedDate: formattedDate.value,
-    });
-  });
-}
-</script>

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

@@ -1,66 +0,0 @@
-import useUI from "vueless/composable.ui";
-import { cva, cx } from "vueless/service.ui";
-
-import defaultConfig from "../configs/default.config";
-import { computed } from "vue";
-
-export function useAttrs(props, { inputPasswordClasses }) {
-  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-  const { input, block } = config.value;
-
-  const cvaInput = cva({
-    base: input.base,
-    variants: input.variants,
-    compoundVariants: input.compoundVariants,
-  });
-
-  const cvaBlock = cva({
-    base: block.base,
-    variants: block.variants,
-    compoundVariants: block.compoundVariants,
-  });
-
-  const blockClasses = computed(() =>
-    cvaBlock({
-      error: Boolean(props.error),
-      disabled: props.disabled,
-    }),
-  );
-
-  const inputClasses = computed(() =>
-    cvaInput({
-      size: props.size,
-      type: props.type,
-      labelOutside: props.labelOutside,
-      label: Boolean(props.label),
-      error: Boolean(props.error),
-    }),
-  );
-
-  const wrapperAttrs = getAttrs("wrapper");
-  const inputWrapperAttrs = getAttrs("inputWrapper");
-  const rightSlotAttrs = getAttrs("rightSlot");
-  const leftSlotAttrs = getAttrs("leftSlot");
-  const passwordIconAttrs = getAttrs("passwordIcon");
-  const blockAttrs = getAttrs("block", { classes: blockClasses });
-  const labelAttrs = getAttrs("label", { isComponent: true });
-  const inputAttrsRaw = getAttrs("input", { classes: inputClasses });
-
-  const inputAttrs = computed(() => ({
-    ...inputAttrsRaw.value,
-    class: cx([inputAttrsRaw.value.class, inputPasswordClasses.value]),
-  }));
-
-  return {
-    config,
-    inputAttrs,
-    blockAttrs,
-    wrapperAttrs,
-    labelAttrs,
-    passwordIconAttrs,
-    leftSlotAttrs,
-    inputWrapperAttrs,
-    rightSlotAttrs,
-    hasSlotContent,
-  };
-}

package/ui.form-input/configs/default.config.js

@@ -1,72 +0,0 @@
-export default /*tw*/ {
-  wrapper: "relative w-full",
-  inputWrapper: "flex relative w-full",
-  rightSlot: "flex items-center justify-end whitespace-nowrap pr-4 rounded-r-lg rounded-l-none",
-  leftSlot: "flex items-center justify-end whitespace-nowrap pl-4 rounded-l-lg rounded-r-none",
-  passwordIcon: "",
-  passwordVisibleIconName: "visibility",
-  passwordHiddenIconName: "visibility_off",
-  label: "",
-  block: {
-    base: `
-      rounded-lg border border-solid border-gray-300 bg-white !opacity-100 relative flex
-      transition duration-100 ease-in-out
-      hover:border-gray-400 hover:focus-within:border-gray-500
-      focus-within:border-gray-500 focus-within:ring-4 focus-within:ring-gray-600/[.15]
-    `,
-    variants: {
-      disabled: {
-        true: `
-          text-gray-900 border-gray-100 bg-gray-100 opacity-100 cursor-default
-          hover:border-gray-100
-        `,
-      },
-      error: {
-        true: `
-          border-red-300
-          hover:border-red-400 hover:focus-within:border-red-500
-          focus-within:border-red-500 focus-within:ring-red-100
-        `,
-      },
-    },
-  },
-  input: {
-    base: `
-      block w-full pb-2 px-4 font-normal leading-none text-gray-900 placeholder:font-normal placeholder-gray-400
-      transition duration-100 ease-in-out bg-white border-none border-gray-300 rounded-lg shadow-none
-      focus:outline-none focus:ring-0 disabled:opacity-50
-      disabled:cursor-not-allowed disabled:text-gray-900 disabled:border-gray-100
-      read-only:border-gray-300 read-only:ring-0
-    `,
-    variants: {
-      size: {
-        sm: "pt-6 text-sm placeholder:text-sm placeholder:font-normal",
-        md: "pt-7 text-base placeholder:text-base placeholder:font-normal",
-        lg: "pt-8 text-lg placeholder:text-lg placeholder:font-normal",
-      },
-      error: `
-        border-red-300 hover:border-red-400 focus:border-red-500 focus:ring-red-100
-        focus-within:border-red-500 focus-within:ring-red-100
-      `,
-    },
-    // Note: Left slot width may affect horizontal label position.
-    compoundVariants: [
-      { labelOutside: true, size: "sm", class: "py-2" },
-      { labelOutside: true, size: "md", class: "py-2.5" },
-      { labelOutside: true, size: "lg", class: "py-3" },
-      { labelOutside: false, label: false, size: "sm", class: "py-2" },
-      { labelOutside: false, label: false, size: "md", class: "py-2.5" },
-      { labelOutside: false, label: false, size: "lg", class: "py-3" },
-    ],
-  },
-  defaultVariants: {
-    size: "md",
-    type: "text",
-    inputMode: "text",
-    error: false,
-    readonly: false,
-    disabled: false,
-    labelOutside: false,
-    noAutocomplete: false,
-  },
-};

package/ui.form-input/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 UInput = "UInput";

package/ui.form-input/index.stories.js

@@ -1,166 +0,0 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
-
-import UInput from "vueless/ui.form-input";
-import UIcon from "vueless/ui.image-icon";
-import UGroup from "vueless/ui.container-group";
-import URow from "vueless/ui.container-row";
-
-export default {
-  id: "3010",
-  title: "Form Inputs & Controls / Input",
-  component: UInput,
-  args: {
-    label: "Label",
-  },
-  argTypes: {
-    ...getArgTypes(UInput.name),
-    modelValue: { control: { type: "text" } },
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UInput },
-  setup() {
-    const slots = getSlotNames(UInput.name);
-
-    return { args, slots };
-  },
-  template: `
-    <UInput
-        v-bind="args"
-    >
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
-    </UInput>
-  `,
-});
-
-const SlotTemplate = (args) => ({
-  components: { UInput, UIcon },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UInput v-bind="args"
-    >
-      ${args.slotTemplate}
-    </UInput>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UInput, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <UInput
-        v-for="(size, index) in sizes"
-        v-bind="args"
-        :size="size"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-const ValidationRuleTemplate = (args, { argTypes } = {}) => ({
-  components: { UInput, URow },
-  setup() {
-    return {
-      args,
-      rules: argTypes.validationRule.options,
-    };
-  },
-  template: `
-    <URow>
-      <UInput
-        v-for="(rule, index) in rules"
-        v-bind="args"
-        :validationRule="rule"
-        :key="index"
-        :description="rule"
-      />
-    </URow>
-  `,
-});
-
-const LabelPlacementTemplate = (args) => ({
-  components: { UInput, UGroup },
-  setup() {
-    return {
-      args,
-    };
-  },
-  template: `
-    <UGroup size="lg">
-      <UInput
-        v-bind="args"
-        label="top"
-        :label-outside="true"
-      />
-
-      <UInput
-        v-bind="args"
-        label="topInside"
-        :label-outside="false"
-      />
-    </UGroup>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const disabled = DefaultTemplate.bind({});
-disabled.args = { disabled: true };
-
-export const description = DefaultTemplate.bind({});
-description.args = { description: "some description text" };
-
-export const error = DefaultTemplate.bind({});
-error.args = { error: "some error text" };
-
-export const placeholder = DefaultTemplate.bind({});
-placeholder.args = { placeholder: "some placeholder text" };
-
-export const readonly = DefaultTemplate.bind({});
-readonly.args = { readonly: true, value: "some value for read" };
-
-export const noAutocomplete = DefaultTemplate.bind({});
-noAutocomplete.args = { noAutocomplete: true };
-
-export const typePassword = DefaultTemplate.bind({});
-typePassword.args = { type: "password" };
-
-export const labelPlacement = LabelPlacementTemplate.bind({});
-labelPlacement.args = {};
-
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
-
-export const validationRules = ValidationRuleTemplate.bind({});
-validationRules.args = {};
-
-export const slotLeft = SlotTemplate.bind({});
-slotLeft.args = {
-  slotTemplate: `
-    <template #left>
-      🥸
-    </template>
-  `,
-};
-
-export const slotRight = SlotTemplate.bind({});
-slotRight.args = {
-  slotTemplate: `
-    <template #right>
-      🥸
-    </template>
-  `,
-};