vueless 0.0.10 → 0.0.12

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

@@ -0,0 +1,171 @@
+<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/ui.form-date-picker/Docs.mdx

@@ -0,0 +1,52 @@
+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/ui.form-date-picker/composables/attrs.composable.js

@@ -0,0 +1,22 @@
+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/ui.form-date-picker/configs/default.config.js

@@ -0,0 +1,26 @@
+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/ui.form-date-picker/constants/index.js

@@ -0,0 +1,5 @@
+/*
+  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/ui.form-date-picker/index.stories.js

@@ -0,0 +1,132 @@
+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/ui.form-date-picker/index.vue

@@ -0,0 +1,256 @@
+<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>