vueless 0.0.4 → 0.0.6

package/src/ui.dropdown-list/index.vue

@@ -0,0 +1,284 @@
+<template>
+  <div
+    ref="wrapperRef"
+    tabindex="1"
+    :style="{ maxHeight: wrapperHeight }"
+    v-bind="wrapperAttrs"
+    @keydown.self.down.prevent="pointerForward"
+    @keydown.self.up.prevent="pointerBackward"
+    @keydown.enter.tab.stop.self="addPointerElement"
+  >
+    <ul :id="`listbox-${id}`" v-bind="listAttrs" role="listbox">
+      <li
+        v-for="(option, index) of options"
+        :id="`${id}-${index}`"
+        :key="index"
+        :role="!(option && (option.$isLabel || option.$isDisabled)) ? 'option' : null"
+        v-bind="optionItemAttrs"
+      >
+        <!-- option title -->
+        <span
+          v-if="
+            !(option && (option.$isLabel || option.$isDisabled || option.isSubGroup)) &&
+            !option.isHidden
+          "
+          v-bind="optionAttrs(optionHighlight(index, option))"
+          @click.stop="select(option)"
+          @mouseenter.self="pointerSet(index)"
+        >
+          <!-- @slot Use it to add something before option. -->
+          <slot :option="option" name="before-option" />
+
+          <slot name="option" :option="option" :index="index">
+            <span
+              :style="getMarginForSubCategory(option.level)"
+              v-bind="optionContentAttrs"
+              v-text="option[labelKey]"
+            />
+          </slot>
+
+          <!-- @slot Use it to add something after option. -->
+          <slot :option="option" name="after-option" />
+        </span>
+
+        <!-- group title -->
+        <div
+          v-if="
+            option &&
+            (option.$isLabel || option.$isDisabled || option.isSubGroup) &&
+            !option.isHidden
+          "
+        >
+          <div v-if="option.$groupLabel" v-bind="groupLabelAttrs" v-text="option.$groupLabel" />
+
+          <div
+            v-else-if="option.isSubGroup"
+            :style="getMarginForSubCategory(option.level)"
+            v-bind="subGroupLabelAttrs"
+            v-text="option[labelKey]"
+          />
+        </div>
+      </li>
+      <slot
+        v-if="hasSlotContent($slots['empty']) || options.length === 0"
+        name="empty"
+        :empty-styles="optionClasses"
+      >
+        <span v-bind="optionAttrs()">
+          <span v-text="config.i18n.noDataToShow" />
+        </span>
+      </slot>
+
+      <!-- Add button -->
+      <template v-if="addOption">
+        <div v-bind="addTitleWrapperAttrs" @click="onClickAddOption">
+          <div v-bind="addTitleAttrs">
+            {{ config.i18n.add }}
+            <span v-bind="addTitleHotkeyAttrs" v-text="addOptionKeyCombination" />
+          </div>
+        </div>
+        <UButton pill square v-bind="buttonAddAttrs" @click="onClickAddOption">
+          <UIcon color="white" size="xs" :name="config.iconAddName" v-bind="iconAddAttrs" />
+        </UButton>
+      </template>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+
+import UIcon from "../ui.image-icon";
+import UButton from "../ui.button";
+
+import UIService, { getRandomId, isMac } from "../service.ui";
+
+import usePointer from "./composables/usePointer";
+import useAttrs from "./composables/attrs.composable";
+import defaultConfig from "./configs/default.config.js";
+import { UDropdownList } from "./constants";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UDropdownList", inheritAttrs: false });
+
+// TODO: Use props and regular modal value
+const modelValue = defineModel({ type: [String, Number, Object], default: "" });
+
+const props = defineProps({
+  /**
+   * Set options list.
+   */
+  options: {
+    type: Array,
+    default: () => [],
+  },
+
+  /**
+   * Label key in the item object of options.
+   */
+  labelKey: {
+    type: String,
+    default: "label",
+  },
+
+  /**
+   * Value key in the item object of options.
+   */
+  valueKey: {
+    type: String,
+    default: "id",
+  },
+
+  /**
+   * Set a name of the property containing the group label.
+   */
+  groupLabel: {
+    type: String,
+    default: "label",
+  },
+
+  /**
+   * Set a name of the property containing the group values.
+   */
+  groupValues: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Show add new option button to the list.
+   */
+  addOption: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * Disables the select.
+   */
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDropdownList).default.disabled,
+  },
+
+  /**
+   * Set size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UDropdownList).default.size,
+  },
+
+  /**
+   * List max height in pixels.
+   */
+  maxHeight: {
+    type: [Number, String],
+    default: UIService.get(defaultConfig, UDropdownList).default.maxHeight,
+  },
+
+  /**
+   * List option height in pixels.
+   */
+  optionHeight: {
+    type: Number,
+    default: UIService.get(defaultConfig, UDropdownList).default.optionHeight,
+  },
+
+  /**
+   * Generates unique element id.
+   * @ignore
+   */
+  id: {
+    type: String,
+    default: () => getRandomId(),
+  },
+
+  /**
+   * Sets component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "addOption"]);
+
+const wrapperRef = ref(null);
+
+const { pointer, pointerDirty, pointerSet, pointerBackward, pointerForward, pointerReset } =
+  usePointer(props.options, props.optionHeight, wrapperRef);
+
+const {
+  config,
+  hasSlotContent,
+  wrapperAttrs,
+  listAttrs,
+  optionItemAttrs,
+  addTitleWrapperAttrs,
+  addTitleAttrs,
+  addTitleHotkeyAttrs,
+  buttonAddAttrs,
+  iconAddAttrs,
+  optionAttrs,
+  subGroupLabelAttrs,
+  groupLabelAttrs,
+  optionClasses,
+  optionContentAttrs,
+} = useAttrs(props);
+
+defineExpose({ pointerSet, pointerBackward, pointerForward, pointerReset, addPointerElement });
+
+const addOptionKeyCombination = computed(() => {
+  return isMac ? "(⌘ + Enter)" : "(Ctrl + Enter)";
+});
+
+const wrapperHeight = computed(() =>
+  props.maxHeight === undefined ? "auto" : `${props.maxHeight}px`,
+);
+
+function onClickAddOption() {
+  emit("addOption");
+}
+
+function select(option, key) {
+  if (props.disabled || option.$isDisabled || option.$isLabel) {
+    return;
+  }
+
+  if (key === "Tab" && !pointerDirty.value) return;
+
+  modelValue.value = option[props.valueKey];
+}
+
+function isSelectedOption(option) {
+  return modelValue.value === option[props.valueKey];
+}
+
+function getMarginForSubCategory(level) {
+  const baseMargin = 1;
+
+  if (level > 1) {
+    return `margin-left: ${baseMargin * (level - 1)}rem`;
+  }
+}
+
+function optionHighlight(index, option) {
+  const classes = [];
+
+  if (index === pointer.value) classes.push(config.value.optionHighlight);
+  if (isSelectedOption(option)) classes.push(config.value.optionSelected);
+
+  return classes;
+}
+
+function addPointerElement({ key } = "Enter") {
+  if (props.options.length > 0) {
+    select(props.options[pointer.value], key);
+  }
+
+  pointerReset();
+}
+</script>

package/src/ui.form-calendar/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/src/ui.form-calendar/components/DayView.vue

@@ -0,0 +1,268 @@
+<template>
+  <div v-bind="dayViewWrapperAttrs">
+    <div v-bind="weekDaysWrapperAttrs">
+      <span v-for="weekDay in weekdays" :key="weekDay" v-bind="weekDayAttrs" v-text="weekDay" />
+    </div>
+    <div v-bind="daysWrapperAttrs">
+      <button
+        v-for="day in days"
+        :key="day"
+        tabindex="-1"
+        :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
+        v-bind="dayAttrs(getDayClasses(day))"
+        @mousedown.prevent.capture
+        @click="onClickDay(day)"
+        v-text="formatDate(day, 'j', locale)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+import { formatDate, dateIsOutOfRange } from "../services/calendar.service";
+import {
+  isToday,
+  getDateWithoutTime,
+  getLastDayOfMonth,
+  isSameDay,
+  isAnotherMothDay,
+} from "../services/date.service";
+
+import useAttrs from "../composables/attrs.composable";
+
+import { DAYS_IN_WEEK, START_WEEK } from "../constants";
+
+const props = defineProps({
+  selectedDate: {
+    type: [Date, null],
+    required: true,
+  },
+
+  selectedDateTo: {
+    type: [Date, null],
+    default: undefined,
+  },
+
+  activeDate: {
+    type: [Date, null],
+    required: true,
+  },
+
+  activeMonth: {
+    type: [Date, null],
+    required: true,
+  },
+
+  locale: {
+    type: Object,
+    required: true,
+  },
+
+  dateFormat: {
+    type: String,
+    required: true,
+  },
+
+  range: {
+    type: Boolean,
+    default: false,
+  },
+
+  maxDate: {
+    type: [Date, String],
+    default: undefined,
+  },
+
+  minDate: {
+    type: [Date, String],
+    default: undefined,
+  },
+
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(["input"]);
+
+const {
+  dayViewWrapperAttrs,
+  weekDaysWrapperAttrs,
+  weekDayAttrs,
+  daysWrapperAttrs,
+  activeDayAttrs,
+  selectedDayAttrs,
+  currentDayAttrs,
+  anotherMonthDayAttrs,
+  dayAttrs,
+  inRangeFirstDayAttrs,
+  inRangeLastDayAttrs,
+  inRangeDayAttrs,
+} = useAttrs(props);
+
+const localSelectedDate = computed(() => {
+  return props.selectedDate === null ? getDateWithoutTime() : props.selectedDate;
+});
+
+const activeMonthDate = computed(() => {
+  return props.activeMonth || localSelectedDate.value;
+});
+
+const firstDayOfMonth = computed(() => {
+  const date = new Date(activeMonthDate.value.valueOf());
+
+  date.setDate(1);
+
+  return date;
+});
+
+const lastDayOfMonth = computed(() => {
+  return getLastDayOfMonth(activeMonthDate.value);
+});
+
+const firstDayOfPrevMonth = computed(() => {
+  const prevMonth = activeMonthDate.value.getMonth() - 1;
+
+  return new Date(activeMonthDate.value.getFullYear(), prevMonth, 1);
+});
+
+const lastDayOfPrevMonth = computed(() => {
+  const date = new Date(activeMonthDate.value.valueOf());
+
+  date.setDate(0);
+
+  return date;
+});
+
+const firstDayOfNextMonth = computed(() => {
+  const date = new Date(activeMonthDate.value.valueOf());
+  const nextMonth = activeMonthDate.value.getMonth() + 1;
+
+  date.setDate(1);
+  date.setMonth(nextMonth);
+
+  return date;
+});
+
+const monthDays = computed(() => {
+  const dayNumber = lastDayOfMonth.value.getDate();
+
+  return Array.from({ length: dayNumber }, (_, index) => dayNumber - index)
+    .map((day) => getDay(activeMonthDate.value, day))
+    .reverse();
+});
+
+const prevMonthDays = computed(() => {
+  let prevMonthTotalDays = firstDayOfMonth.value.getDay() - START_WEEK;
+
+  if (prevMonthTotalDays < 0) {
+    prevMonthTotalDays = DAYS_IN_WEEK + prevMonthTotalDays;
+  }
+
+  return Array.from(
+    { length: prevMonthTotalDays },
+    (_, index) => lastDayOfPrevMonth.value.getDate() - index,
+  )
+    .map((day) => getDay(firstDayOfPrevMonth.value, day))
+    .reverse();
+});
+
+const nextMonthDays = computed(() => {
+  const nextMonthTotalDays =
+    DAYS_IN_WEEK - (monthDays.value.concat(prevMonthDays.value).length % DAYS_IN_WEEK);
+
+  if (nextMonthTotalDays === DAYS_IN_WEEK) {
+    return [];
+  }
+
+  return Array.from({ length: nextMonthTotalDays }, (_, index) => nextMonthTotalDays - index)
+    .map((day) => getDay(firstDayOfNextMonth.value, day))
+    .reverse();
+});
+
+const weekdays = computed(() =>
+  Array.from({ length: DAYS_IN_WEEK }, (_, index) => DAYS_IN_WEEK - index)
+    .map(getWeekDayName)
+    .reverse(),
+);
+
+const days = computed(() => {
+  return prevMonthDays.value.concat(monthDays.value, nextMonthDays.value);
+});
+
+function getWeekDayName(dayNumber) {
+  const date = new Date();
+
+  date.setDate((date.getDate() + (DAYS_IN_WEEK + dayNumber - date.getDay())) % DAYS_IN_WEEK);
+
+  return formatDate(date, "D", props.locale);
+}
+
+function getDay(date, dayNumber) {
+  const day = new Date(date.valueOf());
+
+  day.setDate(dayNumber);
+
+  return day;
+}
+
+function getDayClasses(day) {
+  if (isToday(day) && props.selectedDate === null) {
+    return [currentDayAttrs.value.class];
+  }
+
+  if (props.range && isSelectedDay(day)) {
+    return [inRangeFirstDayAttrs.value.class];
+  }
+
+  if (props.range && isSelectedToDay(day)) {
+    return [inRangeLastDayAttrs.value.class];
+  }
+
+  if (
+    props.range &&
+    localSelectedDate.value &&
+    props.selectedDateTo &&
+    !dateIsOutOfRange(day, props.selectedDate, props.selectedDateTo, props.locale, props.dateFormat)
+  ) {
+    return [inRangeDayAttrs.value.class];
+  }
+
+  if (isSelectedDay(day)) {
+    return [selectedDayAttrs.value.class];
+  }
+
+  if (isSameDay(props.activeDate, day)) {
+    return [activeDayAttrs.value.class];
+  }
+
+  if (isAnotherMothDay(day, activeMonthDate.value)) {
+    return [anotherMonthDayAttrs.value.class];
+  }
+}
+
+function isSelectedDay(day) {
+  return isSameDay(day, localSelectedDate.value);
+}
+
+function isSelectedToDay(day) {
+  return isSameDay(day, props.selectedDateTo);
+}
+
+function onClickDay(day) {
+  const isSameDay = isSelectedDay(day) && props.selectedDate !== null;
+  const isSameDayInRange =
+    isSelectedDay(day) && props.selectedDate !== null && props.selectedDateTo && props.range;
+
+  if (isSameDay || isSameDayInRange) {
+    emit("input", null);
+
+    return;
+  }
+
+  emit("input", day);
+}
+</script>

package/src/ui.form-calendar/components/MonthView.vue

@@ -0,0 +1,114 @@
+<template>
+  <div v-bind="monthViewWrapperAttrs">
+    <button
+      v-for="month in months"
+      :key="month"
+      :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
+      v-bind="monthAttrs(getMonthClasses(month))"
+      @click="onClickMonth(month)"
+      @mousedown.prevent.capture
+      v-text="formatDate(month, 'M', props.locale)"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { formatDate, dateIsOutOfRange } from "../services/calendar.service";
+import { isSameMonth, getDateWithoutTime } from "../services/date.service";
+
+import useAttrs from "../composables/attrs.composable";
+
+import { MONTHS_PER_VIEW } from "../constants";
+
+const props = defineProps({
+  selectedDate: {
+    type: [Date, null],
+    required: true,
+  },
+
+  activeDate: {
+    type: [Date, null],
+    required: true,
+  },
+
+  activeMonth: {
+    type: [Date, null],
+    required: true,
+  },
+
+  locale: {
+    type: Object,
+    required: true,
+  },
+
+  dateFormat: {
+    type: String,
+    required: true,
+  },
+
+  maxDate: {
+    type: [Date, String],
+    default: undefined,
+  },
+
+  minDate: {
+    type: [Date, String],
+    default: undefined,
+  },
+
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(["input"]);
+
+const { monthViewWrapperAttrs, selectedMonthAttrs, activeMonthAttrs, monthAttrs } = useAttrs(props);
+
+const localSelectedDate = computed(() => {
+  return props.selectedDate === null ? getDateWithoutTime() : props.selectedDate;
+});
+
+const localActiveMonth = computed(
+  () => props.activeMonth || props.activeDate || localSelectedDate.value,
+);
+
+const months = computed(() =>
+  Array.from({ length: MONTHS_PER_VIEW }, (_, i) => i).map((monthNumber) => getMonth(monthNumber)),
+);
+
+function getMonth(monthNumber) {
+  let newDate = new Date(localActiveMonth.value.valueOf());
+
+  newDate.setMonth(monthNumber);
+
+  // Means the current day has less days so the extra month is
+  // in the following month
+  if (newDate.getDate() !== localActiveMonth.value.getDate()) {
+    // Assign the last day of previous month
+    newDate = new Date(newDate.getFullYear(), newDate.getMonth(), 0);
+  }
+
+  return newDate;
+}
+
+function getMonthClasses(day) {
+  if (isSelectedMonth(day)) {
+    return [selectedMonthAttrs.value.class];
+  }
+
+  if (isSameMonth(props.activeMonth, day)) {
+    return [activeMonthAttrs.value.class];
+  }
+}
+
+function isSelectedMonth(month) {
+  return isSameMonth(month, localSelectedDate.value);
+}
+
+function onClickMonth(month) {
+  emit("input", month);
+}
+</script>