@varlet/ui 3.18.2 → 3.19.0

package/es/date-input/TimeSelect.mjs

@@ -0,0 +1,201 @@
+import { times } from "@varlet/shared";
+import { computed, defineComponent, onBeforeUnmount, onMounted, ref } from "vue";
+import VarMenuSelect from "../menu-select/index.mjs";
+import { createNamespace } from "../utils/components.mjs";
+import { padStart } from "../utils/shared.mjs";
+const { name, n, classes } = createNamespace("date-input-time-select");
+import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeClass as _normalizeClass, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, withModifiers as _withModifiers, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from "vue";
+const _hoisted_1 = ["aria-disabled", "onClick"];
+function __render__(_ctx, _cache) {
+  const _component_var_menu_select = _resolveComponent("var-menu-select");
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      ref: "root",
+      class: _normalizeClass(_ctx.n())
+    },
+    [
+      (_openBlock(true), _createElementBlock(
+        _Fragment,
+        null,
+        _renderList(_ctx.segments, (segment, index) => {
+          return _openBlock(), _createElementBlock(
+            _Fragment,
+            {
+              key: segment.key
+            },
+            [
+              index > 0 ? (_openBlock(), _createElementBlock(
+                "span",
+                {
+                  key: 0,
+                  class: _normalizeClass(_ctx.n("separator"))
+                },
+                ":",
+                2
+                /* CLASS */
+              )) : _createCommentVNode("v-if", true),
+              _createVNode(_component_var_menu_select, {
+                show: _ctx.openKey === segment.key,
+                "model-value": segment.value,
+                options: segment.options,
+                trigger: "manual",
+                placement: "bottom",
+                "offset-y": 4,
+                scrollable: "",
+                "close-on-select": false,
+                "popover-class": _ctx.n("popover"),
+                disabled: _ctx.disabled || _ctx.readonly,
+                "onUpdate:show": (value) => _ctx.handleUpdateShow(segment.key, value),
+                "onUpdate:modelValue": (value) => _ctx.selectOption(segment.key, value)
+              }, {
+                default: _withCtx(() => [
+                  _createElementVNode("button", {
+                    type: "button",
+                    class: _normalizeClass(
+                      _ctx.classes(_ctx.n("box"), [_ctx.openKey === segment.key, _ctx.n("box--active")], [_ctx.disabled || _ctx.readonly, _ctx.n("box--disabled")])
+                    ),
+                    "aria-disabled": _ctx.disabled || _ctx.readonly,
+                    onMousedown: _cache[0] || (_cache[0] = _withModifiers(() => {
+                    }, ["prevent"])),
+                    onClick: ($event) => _ctx.toggle(segment.key)
+                  }, _toDisplayString(segment.label), 43, _hoisted_1)
+                ]),
+                _: 2
+                /* DYNAMIC */
+              }, 1032, ["show", "model-value", "options", "popover-class", "disabled", "onUpdate:show", "onUpdate:modelValue"])
+            ],
+            64
+            /* STABLE_FRAGMENT */
+          );
+        }),
+        128
+        /* KEYED_FRAGMENT */
+      ))
+    ],
+    2
+    /* CLASS */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  components: {
+    VarMenuSelect
+  },
+  props: {
+    hour: {
+      type: Number,
+      default: 0
+    },
+    minute: {
+      type: Number,
+      default: 0
+    },
+    second: {
+      type: Number,
+      default: 0
+    },
+    useSeconds: {
+      type: Boolean,
+      default: true
+    },
+    readonly: Boolean,
+    disabled: Boolean,
+    isHourAllowed: Function,
+    isMinuteAllowed: Function,
+    isSecondAllowed: Function
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    const root = ref(null);
+    const openKey = ref(null);
+    const segments = computed(() => {
+      const list = [
+        buildSegment("hour", props.hour, 24, props.isHourAllowed),
+        buildSegment("minute", props.minute, 60, props.isMinuteAllowed)
+      ];
+      if (props.useSeconds) {
+        list.push(buildSegment("second", props.second, 60, props.isSecondAllowed));
+      }
+      return list;
+    });
+    onMounted(() => {
+      document.addEventListener("mousedown", handlePopoverMousedown, true);
+      document.addEventListener("pointerdown", handleOutsidePointerdown, true);
+    });
+    onBeforeUnmount(() => {
+      document.removeEventListener("mousedown", handlePopoverMousedown, true);
+      document.removeEventListener("pointerdown", handleOutsidePointerdown, true);
+    });
+    function buildSegment(key, value, count, allowed) {
+      return {
+        key,
+        value,
+        label: padStart(`${value}`, 2, "0"),
+        options: times(count, (option) => ({
+          label: padStart(`${option}`, 2, "0"),
+          value: option,
+          disabled: allowed ? !allowed(option) : false
+        }))
+      };
+    }
+    function toggle(key) {
+      if (props.disabled || props.readonly) {
+        return;
+      }
+      openKey.value = openKey.value === key ? null : key;
+    }
+    function handleUpdateShow(key, value) {
+      if (!value && openKey.value === key) {
+        openKey.value = null;
+      }
+    }
+    function selectOption(key, value) {
+      const time = {
+        hour: props.hour,
+        minute: props.minute,
+        second: props.second
+      };
+      time[key] = value;
+      openKey.value = null;
+      emit("change", time, key);
+    }
+    function isInsidePopover(target) {
+      if (!target) {
+        return false;
+      }
+      return Array.from(document.querySelectorAll(`.${n("popover")}`)).some((popover) => popover.contains(target));
+    }
+    function handlePopoverMousedown(event) {
+      if (openKey.value != null && isInsidePopover(event.target)) {
+        event.preventDefault();
+      }
+    }
+    function handleOutsidePointerdown(event) {
+      var _a;
+      if (openKey.value == null) {
+        return;
+      }
+      const target = event.target;
+      if (target && ((_a = root.value) == null ? void 0 : _a.contains(target)) || isInsidePopover(target)) {
+        return;
+      }
+      openKey.value = null;
+    }
+    return {
+      n,
+      classes,
+      root,
+      openKey,
+      segments,
+      toggle,
+      handleUpdateShow,
+      selectOption
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/date-input/date-input.css

@@ -0,0 +1 @@
+:root { --date-input-picker-width: 320px; --date-input-time-select-separator-color: var(--color-on-surface-variant); --date-input-time-select-border-color: var(--color-outline); --date-input-time-select-active-color: var(--color-primary);}.var-date-input { text-align: left;}.var-date-input .var-menu[var-date-input-cover] { width: 100%; background: transparent; display: block;}.var-date-input__picker { width: var(--date-input-picker-width); --date-picker-border-radius: 0; --date-picker-body-background-color: transparent; --date-picker-title-background: transparent;}.var-date-input__picker .var-date-picker-header { background-color: var(--menu-background-color);}.var-date-input__calendar-icon-container { display: inline-flex; align-items: center; margin-left: 6px;}.var-date-input__calendar-icon { font-size: var(--field-decorator-icon-size);}.var-date-input__clear-icon-container { display: inline-flex; align-items: center; margin-left: 6px; cursor: pointer;}.var-date-input__clear-icon { font-size: var(--field-decorator-icon-size);}.var-date-input--menu { overflow: hidden;}.var-date-input--standard-menu-margin { margin-top: var(--field-decorator-line-focus-size) !important;}.var-date-input--filled-menu-margin { margin-top: var(--field-decorator-line-focus-size) !important;}.var-date-input__datetime { width: 100%;}.var-date-input__datetime-row { display: flex; align-items: center; gap: 10px;}.var-date-input__datetime-row--range { justify-content: center;}.var-date-input__datetime-arrow { flex: none; font-size: 12px; color: var(--date-input-time-select-separator-color);}.var-date-input-time-select { display: inline-flex; align-items: center;}.var-date-input-time-select__separator { margin: 0 4px; color: var(--date-input-time-select-separator-color);}.var-date-input-time-select__box { min-width: 36px; height: 30px; padding: 0 8px; border: thin solid var(--date-input-time-select-border-color); border-radius: 4px; background: transparent; color: inherit; font-size: inherit; font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color 0.2s var(--cubic-bezier);}.var-date-input-time-select__box:not(.var-date-input-time-select__box--disabled):hover { border-color: var(--date-input-time-select-active-color);}.var-date-input-time-select__box--active { border-color: var(--date-input-time-select-active-color); color: var(--date-input-time-select-active-color);}.var-date-input-time-select__box--disabled { cursor: not-allowed; opacity: var(--opacity-disabled);}.var-date-input-time-select__popover { min-width: 64px; --menu-select-menu-max-height: 200px;}.var-date-input-time-select__popover .var-menu-select__menu { scrollbar-width: none;}.var-date-input-time-select__popover .var-menu-select__menu::-webkit-scrollbar { display: none;}

package/es/date-input/index.mjs

@@ -0,0 +1,12 @@
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import DateInput from "./DateInput.mjs";
+import { props as dateInputProps } from "./props.mjs";
+withInstall(DateInput);
+withPropsDefaultsSetter(DateInput, dateInputProps);
+const _DateInputComponent = DateInput;
+var stdin_default = DateInput;
+export {
+  _DateInputComponent,
+  dateInputProps,
+  stdin_default as default
+};

package/es/date-input/props.mjs

@@ -0,0 +1,77 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { props as inputProps } from "../input/props.mjs";
+import { defineListenerProp, pickProps } from "../utils/components.mjs";
+const props = __spreadValues({
+  modelValue: [String, Number, Date, Array],
+  type: {
+    type: String,
+    default: "date"
+  },
+  format: String,
+  valueFormat: {
+    type: String
+  },
+  useSeconds: {
+    type: Boolean,
+    default: true
+  },
+  multiple: Boolean,
+  range: Boolean,
+  separator: {
+    type: String,
+    default: ", "
+  },
+  rangeSeparator: {
+    type: String,
+    default: " ~ "
+  },
+  allowedDates: Function,
+  allowedTimes: Function,
+  min: String,
+  max: String,
+  firstDayOfWeek: {
+    type: [String, Number],
+    default: 0
+  },
+  readonly: Boolean,
+  disabled: Boolean,
+  clearable: Boolean,
+  validateTrigger: {
+    type: Array,
+    default: () => ["onInput", "onClear", "onChange"]
+  },
+  onFocus: defineListenerProp(),
+  onBlur: defineListenerProp(),
+  onChange: defineListenerProp(),
+  onClear: defineListenerProp(),
+  "onUpdate:modelValue": defineListenerProp()
+}, pickProps(inputProps, [
+  "size",
+  "variant",
+  "placeholder",
+  "line",
+  "hint",
+  "textColor",
+  "focusColor",
+  "blurColor",
+  "rules",
+  "tabindex"
+]));
+export {
+  props
+};

package/es/date-input/style/index.mjs

@@ -0,0 +1,14 @@
+import '../../styles/common.css'
+import '../../styles/elevation.css'
+import '../../ripple/ripple.css'
+import '../../button/button.css'
+import '../../icon/icon.css'
+import '../../menu/menu.css'
+import '../../menu-option/menuOption.css'
+import '../../menu-select/menuSelect.css'
+import '../../field-decorator/fieldDecorator.css'
+import '../../form-details/formDetails.css'
+import '../../input/input.css'
+import '../../date-picker/date-picker.css'
+import '../date-input.css'
+import '../DateInputSfc.css'