Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@opentiny/vue-date-panel

Package Overview
Dependencies
Maintainers
1
Versions
63
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@opentiny/vue-date-panel - npm Package Compare versions

Comparing version 3.12.0 to 3.13.0-alpha.0

lib/mobile-first.js

411

lib/index.js

@@ -15,82 +15,20 @@ function _extends() {

}
import { renderless, api } from "@opentiny/vue-renderless/date-panel/vue";
import { defineComponent, $prefix, directive, $props, setup as _setup } from "@opentiny/vue-common";
import { language } from "@opentiny/vue-locale";
import Clickoutside from "@opentiny/vue-renderless/common/deps/clickoutside";
import Time from "@opentiny/vue-time";
import DateTable from "@opentiny/vue-date-table";
import YearTable from "@opentiny/vue-year-table";
import MonthTable from "@opentiny/vue-month-table";
import Input from "@opentiny/vue-input";
import Button from "@opentiny/vue-button";
import { iconDoubleRight, iconDoubleLeft, iconChevronLeft, iconChevronRight, iconChevronDown, iconChevronUp } from "@opentiny/vue-icon";
import Popup from "@opentiny/vue-popup";
import "@opentiny/vue-theme/input/index.css";
import { resolveComponent, resolveDirective, openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, renderSlot, createElementBlock, Fragment, renderList, toDisplayString, createCommentVNode, createVNode, vShow, resolveDynamicComponent, createTextVNode } from "vue";
function _createForOfIteratorHelperLoose_tiny(o, allowArrayLike) {
var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
if (it)
return (it = it.call(o)).next.bind(it);
if (Array.isArray(o) || (it = _unsupportedIterableToArray_tiny(o)) || allowArrayLike && o && typeof o.length === "number") {
if (it)
o = it;
var i = 0;
return function() {
if (i >= o.length)
return { done: true };
return { done: false, value: o[i++] };
};
import { $prefix, $props, $setup } from "@opentiny/vue-common";
import PcTemplate from "./pc.js";
import MobileFirstTemplate from "./mobile-first.js";
import "@opentiny/vue-theme/date-panel/index.css";
var template = function template2(mode) {
var _process$env;
var tinyMode = typeof process === "object" ? (_process$env = process.env) == null ? void 0 : _process$env.TINY_MODE : null;
if ("pc" === (tinyMode || mode)) {
return PcTemplate;
}
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _unsupportedIterableToArray_tiny(o, minLen) {
if (!o)
return;
if (typeof o === "string")
return _arrayLikeToArray_tiny(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor)
n = o.constructor.name;
if (n === "Map" || n === "Set")
return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
return _arrayLikeToArray_tiny(o, minLen);
}
function _arrayLikeToArray_tiny(arr, len) {
if (len == null || len > arr.length)
len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++)
arr2[i] = arr[i];
return arr2;
}
var _export_sfc = function _export_sfc2(sfc, props) {
var target = sfc.__vccOpts || sfc;
for (var _iterator = _createForOfIteratorHelperLoose_tiny(props), _step; !(_step = _iterator()).done; ) {
var _step$value = _step.value, key = _step$value[0], val = _step$value[1];
target[key] = val;
if ("mobile-first" === (tinyMode || mode)) {
return MobileFirstTemplate;
}
return target;
return PcTemplate;
};
import "@opentiny/vue-theme/date-panel/index.css";
var _sfc_main = defineComponent({
var DatePanel = {
name: $prefix + "DatePanel",
directives: directive({
Clickoutside
}),
components: {
TimePicker: Time,
YearTable,
MonthTable,
DateTable,
TinyInput: Input,
TinyButton: Button,
TinyPopup: Popup,
IconDoubleRight: iconDoubleRight(),
IconDoubleLeft: iconDoubleLeft(),
IconChevronLeft: iconChevronLeft(),
IconChevronRight: iconChevronRight(),
IconChevronDown: iconChevronDown(),
IconChevronUp: iconChevronUp()
},
componentName: "DatePanel",
props: _extends({}, $props, {

@@ -112,326 +50,13 @@ emitter: Object,

},
formatWeeks: Function,
timeEditable: {
type: Boolean,
default: true
}
formatWeeks: Function
}),
emits: ["pick", "select-change", "dodestroy"],
setup: function setup(props, context) {
return _setup({
return $setup({
props,
context,
renderless,
api,
mono: true,
extendOptions: {
language
}
template
});
}
});
var _hoisted_1 = {
class: "tiny-picker-panel__body-wrapper"
};
var _hoisted_2 = {
key: 0,
class: "tiny-picker-panel__sidebar"
};
var _hoisted_3 = ["onClick"];
var _hoisted_4 = {
class: "tiny-picker-panel__body"
};
var _hoisted_5 = {
key: 0,
class: "tiny-date-picker__time-header"
};
var _hoisted_6 = {
class: "tiny-date-picker__editor-wrap"
};
var _hoisted_7 = {
class: "tiny-date-picker__editor-wrap"
};
var _hoisted_8 = ["aria-label"];
var _hoisted_9 = ["aria-label"];
var _hoisted_10 = ["aria-label"];
var _hoisted_11 = ["aria-label"];
var _hoisted_12 = {
class: "tiny-picker-panel__content"
};
var _hoisted_13 = {
key: 0,
class: "tiny-picker-panel__timezone"
};
var _hoisted_14 = {
class: "tiny-picker-panel__tzlist"
};
var _hoisted_15 = {
class: "tzlist"
};
var _hoisted_16 = ["title", "onClick"];
var _hoisted_17 = {
class: "tiny-picker-panel__footer"
};
function _sfc_render(_ctx, _cache, $props2, $setup, $data, $options) {
var _component_tiny_input = resolveComponent("tiny-input");
var _component_time_picker = resolveComponent("time-picker");
var _component_icon_double_left = resolveComponent("icon-double-left");
var _component_icon_chevron_left = resolveComponent("icon-chevron-left");
var _component_icon_double_right = resolveComponent("icon-double-right");
var _component_icon_chevron_right = resolveComponent("icon-chevron-right");
var _component_date_table = resolveComponent("date-table");
var _component_year_table = resolveComponent("year-table");
var _component_month_table = resolveComponent("month-table");
var _component_tiny_popup = resolveComponent("tiny-popup");
var _component_tiny_button = resolveComponent("tiny-button");
var _directive_clickoutside = resolveDirective("clickoutside");
return openBlock(), createBlock(Transition, {
name: "tiny-zoom-in-top",
onAfterEnter: _ctx.handleEnter,
onAfterLeave: _ctx.handleLeave,
persisted: ""
}, {
default: withCtx(function() {
return [withDirectives(createElementVNode(
"div",
{
class: normalizeClass(["tiny-picker-panel tiny-date-picker tiny-popper", [{
"has-sidebar": _ctx.slots.sidebar || _ctx.state.shortcuts,
"has-time": _ctx.state.showTime
}, _ctx.state.popperClass]])
},
[createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "sidebar", {
class: "tiny-picker-panel__sidebar"
}), _ctx.state.shortcuts ? (openBlock(), createElementBlock("div", _hoisted_2, [(openBlock(true), createElementBlock(
Fragment,
null,
renderList(_ctx.state.shortcuts, function(shortcut, key) {
return openBlock(), createElementBlock("button", {
type: "button",
class: "tiny-picker-panel__shortcut",
key,
onClick: function onClick($event) {
return _ctx.handleShortcutClick(shortcut);
}
}, toDisplayString(shortcut.text), 9, _hoisted_3);
}),
128
/* KEYED_FRAGMENT */
))])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_4, [_ctx.state.showTime ? (openBlock(), createElementBlock("div", _hoisted_5, [createElementVNode("span", _hoisted_6, [createVNode(_component_tiny_input, {
placeholder: _ctx.t("ui.datepicker.selectDate"),
"model-value": _ctx.state.visibleDate,
size: "small",
"onUpdate:modelValue": _cache[0] || (_cache[0] = function(val) {
return _ctx.state.userInputDate = val;
}),
onChange: _ctx.handleVisibleDateChange
}, null, 8, ["placeholder", "model-value", "onChange"])]), withDirectives((openBlock(), createElementBlock("span", _hoisted_7, [createVNode(_component_tiny_input, {
ref: "input",
onFocus: _cache[1] || (_cache[1] = function($event) {
return _ctx.state.timePickerVisible = true;
}),
placeholder: _ctx.t("ui.datepicker.selectTime"),
"model-value": _ctx.state.visibleTime,
size: "small",
"onUpdate:modelValue": _cache[2] || (_cache[2] = function(val) {
return _ctx.state.userInputTime = val;
}),
onChange: _ctx.handleVisibleTimeChange,
readonly: !_ctx.timeEditable
}, null, 8, ["placeholder", "model-value", "onChange", "readonly"]), _ctx.state.timePickerVisible ? (openBlock(), createBlock(_component_time_picker, {
key: 0,
ref: "timepicker",
step: _ctx.step,
"time-arrow-control": _ctx.state.arrowControl,
show: _ctx.state.timePickerVisible,
value: _ctx.state.date,
onPick: _ctx.handleTimePick
}, null, 8, ["step", "time-arrow-control", "show", "value", "onPick"])) : createCommentVNode("v-if", true)])), [[_directive_clickoutside, _ctx.handleTimePickClose]])])) : createCommentVNode("v-if", true), withDirectives(createElementVNode(
"div",
{
class: normalizeClass(["tiny-date-picker__header", {
"tiny-date-picker__header--bordered": ["month", "year", "years", "yearrange"].includes(_ctx.state.currentView)
}])
},
[createElementVNode("button", {
type: "button",
onClick: _cache[3] || (_cache[3] = function() {
return _ctx.cusPrevYear && _ctx.cusPrevYear.apply(_ctx, arguments);
}),
"aria-label": _ctx.t("ui.datepicker.prevYear"),
class: "tiny-picker-panel__icon-btn tiny-date-picker__prev-btn tiny-icon-d-arrow-left"
}, [createVNode(_component_icon_double_left)], 8, _hoisted_8), withDirectives(createElementVNode("button", {
type: "button",
onClick: _cache[4] || (_cache[4] = function() {
return _ctx.cusPrevMonth && _ctx.cusPrevMonth.apply(_ctx, arguments);
}),
"aria-label": _ctx.t("ui.datepicker.prevMonth"),
class: "tiny-picker-panel__icon-btn tiny-date-picker__prev-btn tiny-icon-arrow-left"
}, [createVNode(_component_icon_chevron_left)], 8, _hoisted_9), [[vShow, _ctx.state.currentView === "date"]]), createElementVNode(
"span",
{
onClick: _cache[5] || (_cache[5] = function() {
return _ctx.showYearPicker && _ctx.showYearPicker.apply(_ctx, arguments);
}),
role: "button",
class: "tiny-date-picker__header-label"
},
toDisplayString(_ctx.state.yearLabel),
1
/* TEXT */
), withDirectives(createElementVNode(
"span",
{
onClick: _cache[6] || (_cache[6] = function() {
return _ctx.showMonthPicker && _ctx.showMonthPicker.apply(_ctx, arguments);
}),
role: "button",
class: normalizeClass(["tiny-date-picker__header-label", {
active: _ctx.state.currentView === "month"
}])
},
toDisplayString(_ctx.t("ui.datepicker.month" + (_ctx.state.month + 1))),
3
/* TEXT, CLASS */
), [[vShow, _ctx.state.currentView === "date"]]), createElementVNode("button", {
type: "button",
onClick: _cache[7] || (_cache[7] = function() {
return _ctx.cusNextYear && _ctx.cusNextYear.apply(_ctx, arguments);
}),
"aria-label": _ctx.t("ui.datepicker.nextYear"),
class: "tiny-picker-panel__icon-btn tiny-date-picker__next-btn tiny-icon-d-arrow-right"
}, [createVNode(_component_icon_double_right)], 8, _hoisted_10), withDirectives(createElementVNode("button", {
type: "button",
onClick: _cache[8] || (_cache[8] = function() {
return _ctx.cusNextMonth && _ctx.cusNextMonth.apply(_ctx, arguments);
}),
"aria-label": _ctx.t("ui.datepicker.nextMonth"),
class: "tiny-picker-panel__icon-btn tiny-date-picker__next-btn tiny-icon-arrow-right"
}, [createVNode(_component_icon_chevron_right)], 8, _hoisted_11), [[vShow, _ctx.state.currentView === "date"]])],
2
/* CLASS */
), [[vShow, _ctx.state.currentView !== "time"]]), createElementVNode("div", _hoisted_12, [_ctx.state.currentView === "date" ? (openBlock(), createBlock(_component_date_table, {
key: 0,
ref: "dateTable",
onPick: _ctx.handleDatePick,
"selection-mode": _ctx.state.selectionMode,
"first-day-of-week": _ctx.state.firstDayOfWeek,
value: _ctx.state.value,
"default-value": _ctx.state.defaultValue ? new Date(_ctx.state.defaultValue) : null,
date: _ctx.state.date,
"cell-class-name": _ctx.state.cellClassName,
"disabled-date": _ctx.state.disabledDate,
"show-week-number": _ctx.showWeekNumber,
"format-weeks": _ctx.formatWeeks
}, null, 8, ["onPick", "selection-mode", "first-day-of-week", "value", "default-value", "date", "cell-class-name", "disabled-date", "show-week-number", "format-weeks"])) : createCommentVNode("v-if", true), ["year", "years", "yearrange"].includes(_ctx.state.currentView) ? (openBlock(), createBlock(_component_year_table, {
key: 1,
ref: "yearTable",
value: _ctx.state.value,
"default-value": _ctx.state.defaultValue ? new Date(_ctx.state.defaultValue) : null,
date: _ctx.state.date,
"disabled-date": _ctx.state.disabledDate,
"selection-mode": _ctx.state.selectionMode,
"start-year": _ctx.state.startYear,
onPick: _ctx.handleYearPick
}, null, 8, ["value", "default-value", "date", "disabled-date", "selection-mode", "start-year", "onPick"])) : createCommentVNode("v-if", true), _ctx.state.currentView === "month" ? (openBlock(), createBlock(_component_month_table, {
key: 2,
ref: "monthTable",
onPick: _ctx.handleMonthPick,
value: _ctx.state.value,
"default-value": _ctx.state.defaultValue ? new Date(_ctx.state.defaultValue) : null,
date: _ctx.state.date,
"disabled-date": _ctx.state.disabledDate
}, null, 8, ["onPick", "value", "default-value", "date", "disabled-date"])) : createCommentVNode("v-if", true)])])]), _ctx.state.isShowTz || _ctx.state.timezone.isServiceTimezone ? withDirectives((openBlock(), createElementBlock("div", _hoisted_13, [createVNode(_component_tiny_input, {
modelValue: _ctx.state.tz,
"onUpdate:modelValue": [_cache[9] || (_cache[9] = function($event) {
return _ctx.state.tz = $event;
}), _ctx.searchTz],
disabled: _ctx.state.timezone.isServiceTimezone,
placeholder: _ctx.t("ui.datepicker.timezone")
}, {
suffix: withCtx(function() {
return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.state.showpopup ? "IconChevronDown" : "IconChevronUp"), {
fill: "#ccc",
onClick: _ctx.toggleTz
}, null, 8, ["onClick"]))];
}),
_: 1
/* STABLE */
}, 8, ["modelValue", "disabled", "onUpdate:modelValue", "placeholder"]), createElementVNode("div", _hoisted_14, [createVNode(_component_tiny_popup, {
modelValue: _ctx.state.showpopup,
"onUpdate:modelValue": _cache[10] || (_cache[10] = function($event) {
return _ctx.state.showpopup = $event;
}),
overlay: false,
position: "up",
duration: 0.2,
closeable: false
}, {
default: withCtx(function() {
return [createElementVNode("div", _hoisted_15, [createElementVNode("ul", null, [(openBlock(true), createElementBlock(
Fragment,
null,
renderList(_ctx.state.renderTzdata, function(tz, index) {
return withDirectives((openBlock(), createElementBlock("li", {
class: "tiny-picker-panel__tzlist-li",
title: tz.name,
key: index,
onClick: function onClick($event) {
return _ctx.selectTz(tz);
}
}, toDisplayString(tz.name), 9, _hoisted_16)), [[vShow, !tz.visible]]);
}),
128
/* KEYED_FRAGMENT */
))])])];
}),
_: 1
/* STABLE */
}, 8, ["modelValue"])])])), [[_directive_clickoutside, _ctx.handleTzPickClose]]) : createCommentVNode("v-if", true), withDirectives(createElementVNode(
"div",
_hoisted_17,
[withDirectives(createVNode(_component_tiny_button, {
size: "mini",
type: "text",
class: "tiny-picker-panel__link-btn",
onClick: _ctx.changeToNow
}, {
default: withCtx(function() {
return [createTextVNode(
toDisplayString(_ctx.t("ui.datepicker.now")),
1
/* TEXT */
)];
}),
_: 1
/* STABLE */
}, 8, ["onClick"]), [[vShow, !["dates", "years"].includes(_ctx.state.selectionMode)]]), createVNode(_component_tiny_button, {
type: "primary",
size: "mini",
class: "tiny-picker-panel__link-btn",
onClick: _ctx.confirm
}, {
default: withCtx(function() {
return [createTextVNode(
toDisplayString(_ctx.t("ui.datepicker.confirm")),
1
/* TEXT */
)];
}),
_: 1
/* STABLE */
}, 8, ["onClick"])],
512
/* NEED_PATCH */
), [[vShow, _ctx.state.isShowFooter]])],
2
/* CLASS */
), [[vShow, _ctx.state.visible]])];
}),
_: 3
/* FORWARDED */
}, 8, ["onAfterEnter", "onAfterLeave"]);
}
var DatePanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
var version = "3.12.0";
var version = "3.13.0-alpha.0";
DatePanel.install = function(Vue) {

@@ -438,0 +63,0 @@ Vue.component(DatePanel.name, DatePanel);

{
"name": "@opentiny/vue-date-panel",
"version": "3.12.0",
"version": "3.13.0-alpha.0",
"description": "",

@@ -10,11 +10,11 @@ "main": "./lib/index.js",

"dependencies": {
"@opentiny/vue-common": "~3.12.0",
"@opentiny/vue-renderless": "~3.12.0",
"@opentiny/vue-input": "~3.12.0",
"@opentiny/vue-button": "~3.12.0",
"@opentiny/vue-locale": "~3.12.0",
"@opentiny/vue-time": "~3.12.0",
"@opentiny/vue-date-table": "~3.12.0",
"@opentiny/vue-year-table": "~3.12.0",
"@opentiny/vue-month-table": "~3.12.0"
"@opentiny/vue-common": "~3.13.0-alpha.0",
"@opentiny/vue-renderless": "~3.13.0-alpha.0",
"@opentiny/vue-input": "~3.13.0-alpha.0",
"@opentiny/vue-button": "~3.13.0-alpha.0",
"@opentiny/vue-locale": "~3.13.0-alpha.0",
"@opentiny/vue-time": "~3.13.0-alpha.0",
"@opentiny/vue-date-table": "~3.13.0-alpha.0",
"@opentiny/vue-year-table": "~3.13.0-alpha.0",
"@opentiny/vue-month-table": "~3.13.0-alpha.0"
},

@@ -21,0 +21,0 @@ "license": "MIT",

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc