vueless 0.0.9 → 0.0.10

package/src/ui.form-color-picker/index.vue

@@ -1,171 +0,0 @@
-<template>
-  <div v-bind="wrapperAttrs">
-    <ULabel
-      :label="label"
-      :description="description"
-      :disabled="disabled"
-      :error="error"
-      :size="size"
-      placement="topWithDesc"
-      :data-cy="dataCy"
-      v-bind="labelAttrs"
-    >
-      <div v-bind="listAttrs">
-        <div v-bind="uncoloredAttrs">
-          <URadio
-            key="uncolored"
-            name="uncolored"
-            :checked="selectedItem === ''"
-            :disabled="disabled"
-            :size="size"
-            color="grayscale"
-            v-bind="uncoloredRadioAttrs"
-            @update:value="onInputRadio('')"
-          />
-
-          <UIcon
-            v-if="selectedItem === ''"
-            :name="config.iconName"
-            color="gray"
-            v-bind="iconAttrs"
-            size="sm"
-          />
-        </div>
-
-        <URadio
-          v-for="(color, index) in colorOptions"
-          :key="index"
-          :name="name"
-          :value="color"
-          :checked="selectedItem === color"
-          :color="color"
-          :disabled="disabled"
-          :size="size"
-          v-bind="radioAttrs"
-          @update:value="onInputRadio(color)"
-        />
-      </div>
-    </ULabel>
-  </div>
-</template>
-
-<script setup>
-import { computed } from "vue";
-
-import UIcon from "../ui.image-icon";
-import URadio from "../ui.form-radio";
-import ULabel from "../ui.form-label";
-import UIService, { getRandomId } from "../service.ui";
-
-import { UColorPicker } from "./constants";
-import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
-
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UColorPicker", inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Color picker selected value.
-   */
-  modelValue: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Color picker colors.
-   */
-  colorOptions: {
-    type: Array,
-    default: () => UIService.get(defaultConfig, UColorPicker).default.colorOptions,
-  },
-
-  /**
-   * Color picker label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Color picker description.
-   */
-  description: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Error message.
-   */
-  error: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Color picker size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: UIService.get(defaultConfig, UColorPicker).default.size,
-  },
-
-  /**
-   * Color picker name.
-   */
-  name: {
-    type: String,
-    default: () => getRandomId(),
-  },
-
-  /**
-   * Set color picker disabled.
-   */
-  disabled: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UColorPicker).default.disabled,
-  },
-
-  /**
-   * Component ui config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "radio",
-  },
-});
-
-const emit = defineEmits(["update:modelValue"]);
-
-const {
-  config,
-  wrapperAttrs,
-  listAttrs,
-  labelAttrs,
-  radioAttrs,
-  iconAttrs,
-  uncoloredAttrs,
-  uncoloredRadioAttrs,
-} = useAttrs(props);
-
-const selectedItem = computed({
-  get: () => props.modelValue,
-  set: (value) => emit("update:modelValue", value),
-});
-
-function onInputRadio(value) {
-  selectedItem.value = value;
-}
-</script>

package/src/ui.form-date-picker/Docs.mdx

@@ -1,52 +0,0 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source, Markdown } from "@storybook/blocks";
-import { getSource } from "../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 />
-
-## Formatting tokens
-Each character in the table below can be used in `dateFormat` and `userFormat` options to achieve the format you need.
-
-<Markdown>
-{`
-| Token | Description                                               | Example                                                       |
-| ----- | --------------------------------------------------------- | ------------------------------------------------------------- |
-| d     | Day of the month, 2 digits with leading zeros             | 01 to 31                                                      |
-| D     | A textual representation of a day                         | Mon through Sun                                               |
-| l     | A full textual representation of the day of the week      | Sunday through Saturday                                       |
-| j     | Day of the month without leading zeros                    | 1 to 31                                                       |
-| J     | Day of the month without leading zeros and ordinal suffix | 1st, 2nd, to 31st                                             |
-| w     | Numeric representation of the day of the week             | 0 (for Sunday) through 6 (for Saturday)                       |
-| W     | Numeric representation of the week                        | 0 (first week of the year) through 52 (last week of the year) |
-| F     | A full textual representation of a month                  | January through December                                      |
-| m     | Numeric representation of a month, with leading zero      | 01 through 12                                                 |
-| n     | Numeric representation of a month, without leading zeros  | 1 through 12                                                  |
-| M     | A short textual representation of a month                 | Jan through Dec                                               |
-| U     | A short textual representation of a month                 | 1413704993                                                    |
-| y     | A two-digit representation of a year                      | 99 or 03                                                      |
-| Y     | A full numeric representation of a year, 4 digits         | 1999 or 2003                                                  |
-| Z     | ISO Date format                                           | 2017-03-04T01:23:43.000Z                                      |
-| H     | Hours (24 hours)                                          | 00 to 23                                                      |
-| h     | Hours                                                     | 1 to 12                                                       |
-| G     | Hours, 2 digits with leading zeros                        | 1 to 12                                                       |
-| i     | Minutes                                                   | 00 to 59                                                      |
-| S     | Seconds, 2 digits                                         | 00 to 59                                                      |
-| s     | Seconds                                                   | 0, 1 to 59                                                    |
-`}
-</Markdown>
-
-## Escaping Formatting Tokens
-You may escape formatting tokens using \\\\.
-
-<Source code={`dateFormat: "Y-m-d\\Z", // Displays: 2017-01-22Z`} language="jsx" dark />

package/src/ui.form-date-picker/composables/attrs.composable.js

@@ -1,22 +0,0 @@
-import useUI from "../../composable.ui";
-
-import defaultConfig from "../configs/default.config";
-import { computed } from "vue";
-
-export default function useAttrs(props, { isShownCalendar }) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-
-  const calendarAttrs = getAttrs("calendar");
-  const inputBlurAttrs = getAttrs("input");
-  const inputActiveAttrs = getAttrs("inputActive");
-
-  const inputAttrs = computed(() => {
-    return isShownCalendar.value ? inputActiveAttrs.value : inputBlurAttrs.value;
-  });
-
-  return {
-    config,
-    calendarAttrs,
-    inputAttrs,
-  };
-}

package/src/ui.form-date-picker/configs/default.config.js

@@ -1,26 +0,0 @@
-export default /*tw*/ {
-  input: "",
-  inputActive: {
-    block: {
-      base: "ring-4 ring-gray-600/[.15] border-gray-500 hover:border-gray-500",
-    },
-  },
-  calendar: "absolute z-40 mt-2",
-  calendarTransition: {
-    enterFromClass: "opacity-0 scale-95",
-    enterActiveClass: "transition transform ease-out duration-100",
-    enterToClass: "opacity-100 scale-100",
-    leaveFromClass: "opacity-100 scale-100",
-    leaveActiveClass: "transition transform ease-in duration-75",
-    leaveToClass: "opacity-0 scale-95",
-  },
-  defaultVariants: {
-    dateFormat: "Y-m-d",
-    userFormat: "F j, Y",
-    size: "md",
-    timepicker: false,
-    disabled: false,
-    maxDate: undefined,
-    minDate: undefined,
-  },
-};

package/src/ui.form-date-picker/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 UDatePicker = "UDatePicker";

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

@@ -1,132 +0,0 @@
-import { getArgTypes, getSlotNames } from "../service.storybook";
-
-import UDatePicker from "../ui.form-date-picker";
-import UIcon from "../ui.image-icon";
-import URow from "../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/src/ui.form-date-picker/index.vue

@@ -1,256 +0,0 @@
-<template>
-  <div class="relative">
-    <UInput
-      :id="id"
-      :key="isShownCalendar"
-      v-model="userFormatDate"
-      :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 UInput from "../ui.form-input";
-import UCalendar from "../ui.form-calendar";
-import { VIEW } from "../ui.form-calendar/constants";
-
-import UIService, { getRandomId } from "../service.ui";
-
-import useAttrs from "./composables/attrs.composable";
-import defaultConfig from "./configs/default.config";
-import { UDatePicker } from "./constants";
-
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UDatePicker", inheritAttrs: false });
-
-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>