vueless 0.0.3 → 0.0.4

package/ui.dropdown-list/index.stories.js

@@ -1,76 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import UDropdownList from "vueless/ui.dropdown-list";
-import URow from "vueless/ui.container-row";
-
-export default {
-  id: "2050",
-  title: "Dropdowns / Dropdown List",
-  component: UDropdownList,
-  args: {
-    options: [
-      { label: "option 1", id: "1" },
-      { label: "option 2", id: "2" },
-      { label: "option 3", id: "3" },
-    ],
-  },
-  argTypes: {
-    ...getArgTypes(UDropdownList.name),
-  },
-  parameters: {
-    backgrounds: {
-      default: "white",
-    },
-    docs: {
-      story: {
-        iframeHeight: 160,
-      },
-    },
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UDropdownList },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UDropdownList
-      v-bind="args"
-    />
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UDropdownList, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <div class="flex flex-col gap-6">
-      <URow>
-        <UDropdownList
-          v-for="(size, index) in sizes"
-          :key="index"
-          v-bind="args"
-          :size="size"
-        />
-      </URow>
-    </div>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
-
-export const maxHeight = DefaultTemplate.bind({});
-maxHeight.args = { maxHeight: 80 };
-
-export const withoutOptions = DefaultTemplate.bind({});
-withoutOptions.args = { options: [] };

package/ui.dropdown-list/index.vue

@@ -1,298 +0,0 @@
-<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-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>{{ i18n.noDataToShow }}</span>
-        </span>
-      </slot>
-
-      <!-- Add button -->
-      <template v-if="addOption">
-        <div v-bind="addTitleWrapperAttrs" @click="onClickAddOption">
-          <div v-bind="addTitleAttrs">
-            {{ 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 usePointer from "./composables/usePointer";
-import useAttrs from "./composables/attrs.composable";
-
-import I18nServiceDefault from "@vueless/services/i18n";
-import UIService, { getRandomId, isMac } from "vueless/service.ui";
-
-import defaultConfig from "./configs/default.config.js";
-
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UDropdownList", inheritAttrs: false });
-
-import { UDropdownList } from "./constants";
-
-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 { getTranslation } = new I18nServiceDefault();
-
-const {
-  config,
-  hasSlotContent,
-  wrapperAttrs,
-  listAttrs,
-  optionItemAttrs,
-  addTitleWrapperAttrs,
-  addTitleAttrs,
-  addTitleHotkeyAttrs,
-  buttonAddAttrs,
-  iconAddAttrs,
-  optionAttrs,
-  subGroupLabelAttrs,
-  groupLabelAttrs,
-  optionClasses,
-} = useAttrs(props);
-
-defineExpose({ pointerSet, pointerBackward, pointerForward, pointerReset, addPointerElement });
-
-const i18n = computed(() => {
-  return {
-    noDataToShow: getTranslation("noDataToShow"),
-    add: getTranslation("add"),
-  };
-});
-
-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>
-
-<i18n>
-en:
-  noDataToShow: "No data to show."
-  add: Add
-ru:
-  noDataToShow: "Нет данных."
-  add: Добавить
-ua:
-  noDataToShow: "Дані відсутні."
-  add: Додати
-</i18n>

package/ui.form-calendar/Docs.mdx

@@ -1,52 +0,0 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source, Markdown } 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 />
-
-## 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-calendar/components/DayView.vue

@@ -1,230 +0,0 @@
-<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,
-  },
-
-  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 {
-  dayViewWrapperAttrs,
-  weekDaysWrapperAttrs,
-  weekDayAttrs,
-  daysWrapperAttrs,
-  activeDayAttrs,
-  selectedDayAttrs,
-  currentDayAttrs,
-  anotherMonthDayAttrs,
-  dayAttrs,
-} = 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 (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 onClickDay(day) {
-  if (isSelectedDay(day) && props.selectedDate !== null) {
-    emit("input", null);
-
-    return;
-  }
-
-  emit("input", day);
-}
-</script>