Socket
Socket
Sign inDemoInstall

@opentiny/vue-picker

Package Overview
Dependencies
Maintainers
1
Versions
59
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@opentiny/vue-picker - npm Package Compare versions

Comparing version 3.12.0 to 3.13.0-alpha.0

lib/mobile-first.js

401

lib/index.js

@@ -1,63 +0,19 @@

import { renderless, api } from "@opentiny/vue-renderless/picker/vue";
import { defineComponent, $prefix, directive, setup as _setup } from "@opentiny/vue-common";
import Input from "@opentiny/vue-input";
import Clickoutside from "@opentiny/vue-renderless/common/deps/clickoutside";
import DatePanel from "@opentiny/vue-date-panel";
import DateRange from "@opentiny/vue-date-range";
import MonthRange from "@opentiny/vue-month-range";
import YearRange from "@opentiny/vue-year-range";
import Time from "@opentiny/vue-time";
import TimeRange from "@opentiny/vue-time-range";
import TimePanel from "@opentiny/vue-time-panel";
import { iconClose, iconCalendar, iconTime } from "@opentiny/vue-icon";
import Tooltip from "@opentiny/vue-tooltip";
import FilterBox from "@opentiny/vue-filter-box";
import { resolveComponent, resolveDirective, openBlock, createElementBlock, withDirectives, createBlock, mergeProps, createSlots, withCtx, createElementVNode, createVNode, Transition, resolveDynamicComponent, createCommentVNode, toDisplayString, normalizeClass, renderSlot } 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++] };
};
}
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 _extends() {
_extends = Object.assign ? Object.assign.bind() : function(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
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;
}
return target;
};
import "@opentiny/vue-theme/picker/index.css";
import "@opentiny/vue-theme/input/index.css";
import { $prefix, $props, $setup } from "@opentiny/vue-common";
import PcTemplate from "./pc.js";
import MobileFirstTemplate from "./mobile-first.js";
import { iconClose } from "@opentiny/vue-icon";
var pickerProps = {

@@ -108,2 +64,6 @@ type: {

},
changeOnConfirm: {
type: Boolean,
default: false
},
disabled: Boolean,

@@ -158,2 +118,3 @@ id: {

timezone: Number,
timezoneOffset: Number,
iso8601: Boolean,

@@ -178,299 +139,41 @@ displayOnly: {

},
formatWeeks: Function
formatWeeks: Function,
autoFormat: {
type: Boolean,
default: false
},
title: String,
blank: {
type: Boolean,
default: false
}
};
var _sfc_main = defineComponent({
import "@opentiny/vue-theme/picker/index.css";
import "@opentiny/vue-theme/input/index.css";
import "@opentiny/vue-icon";
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;
}
if ("mobile-first" === (tinyMode || mode)) {
return MobileFirstTemplate;
}
return PcTemplate;
};
var Picker = {
name: $prefix + "Picker",
componentName: "Picker",
components: {
TinyInput: Input,
TinyFilterBox: FilterBox,
IconCalendar: iconCalendar(),
IconTime: iconTime(),
IconClose: iconClose(),
TinyTooltip: Tooltip
},
emits: ["created", "select-change", "update:modelValue", "blur", "focus", "change"],
props: pickerProps,
directives: directive({
Clickoutside
}),
props: _extends({}, $props, pickerProps),
setup: function setup(props, context) {
return _setup({
return $setup({
props,
context,
renderless,
api,
extendOptions: {
DatePanel,
DateRangePanel: DateRange,
MonthRangePanel: MonthRange,
YearRangePanel: YearRange,
TimePanel: Time,
TimeRangePanel: TimeRange,
TimeSelect: TimePanel
}
template
});
}
});
var _hoisted_1 = {
ref: "reference",
class: "tiny-date-container"
};
var _hoisted_2 = {
class: "tiny-input__icon-container"
};
var _hoisted_3 = ["placeholder", "value", "disabled", "readonly", "name"];
var _hoisted_4 = {
key: 0,
class: "tiny-range-separator"
};
var _hoisted_5 = ["placeholder", "value", "disabled", "readonly", "name"];
var _hoisted_6 = {
key: 1,
class: "tiny-input__icon tiny-range__icon tiny-input__suffix"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
var _component_tiny_filter_box = resolveComponent("tiny-filter-box");
var _component_tiny_tooltip = resolveComponent("tiny-tooltip");
var _component_tiny_input = resolveComponent("tiny-input");
var _directive_clickoutside = resolveDirective("clickoutside");
return openBlock(), createElementBlock(
"div",
_hoisted_1,
[_ctx.shape === "filter" ? withDirectives((openBlock(), createBlock(_component_tiny_filter_box, {
key: 0,
onClick: _ctx.handleFocus,
"show-close": _ctx.clearable,
disabled: _ctx.state.pickerDisabled,
label: _ctx.label,
tip: _ctx.tip,
value: _ctx.state.displayValue.toString(),
"drop-down-visible": _ctx.state.pickerVisible
}, null, 8, ["onClick", "show-close", "disabled", "label", "tip", "value", "drop-down-visible"])), [[_directive_clickoutside, _ctx.handleClose]]) : !_ctx.state.ranged ? withDirectives((openBlock(), createBlock(_component_tiny_input, mergeProps({
key: 1,
tabindex: _ctx.tabindex,
class: ["tiny-date-editor", "tiny-date-editor--" + _ctx.state.type],
readonly: !_ctx.editable || _ctx.readonly || _ctx.state.type === "dates" || _ctx.state.type === "week",
disabled: _ctx.state.pickerDisabled,
size: _ctx.state.pickerSize,
name: _ctx.name
}, _ctx.state.firstInputId, {
placeholder: _ctx.placeholder,
onFocus: _ctx.handleFocus,
onKeydown: _ctx.handleKeydown,
"model-value": _ctx.state.displayValue,
title: _ctx.state.displayValue,
"display-only": _ctx.state.isDisplayOnly,
"display-only-content": _ctx.state.displayValue,
"onUpdate:modelValue": _cache[2] || (_cache[2] = function(value) {
return _ctx.state.userInput = value;
}),
onChange: _ctx.handleChange,
onMouseenter: _ctx.handleMouseEnter,
onMouseleave: _cache[3] || (_cache[3] = function($event) {
return _ctx.state.showClose = false;
}),
"validate-event": false,
ref: "reference"
}), createSlots({
suffix: withCtx(function() {
return [createElementVNode("i", _hoisted_2, [createVNode(Transition, {
name: "tiny-transition-icon-scale-in"
}, {
default: withCtx(function() {
return [_ctx.state.haveTrigger ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.state.showClose ? _ctx.clearIcon : null), {
key: 0,
onClick: _ctx.handleClickIcon,
onMouseenter: _cache[0] || (_cache[0] = function($event) {
return _ctx.state.showClose = true;
}),
onMouseleave: _cache[1] || (_cache[1] = function($event) {
return _ctx.state.showClose = false;
}),
class: "baseClearicon"
}, null, 40, ["onClick"])) : createCommentVNode("v-if", true)];
}),
_: 1
/* STABLE */
}), (openBlock(), createBlock(resolveDynamicComponent(_ctx.state.triggerClass), {
onClick: _ctx.handleFocus,
class: "tiny-svg-size"
}, null, 8, ["onClick"]))])];
}),
panel: withCtx(function() {
return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.state.panel), {
ref: "picker",
visible: _ctx.state.pickerVisible,
onPick: _ctx.handlePick,
onSelectRange: _ctx.handleSelectRange,
onSelectChange: _ctx.handleSelectChange
}, null, 40, ["visible", "onPick", "onSelectRange", "onSelectChange"]))];
}),
_: 2
/* DYNAMIC */
}, [_ctx.label ? {
name: "prefix",
fn: withCtx(function() {
return [createVNode(_component_tiny_tooltip, {
effect: "light",
content: _ctx.state.labelTooltip,
placement: "top",
onMouseenter: _ctx.handleEnterPickerlabel
}, {
default: withCtx(function() {
return [createElementVNode(
"span",
{
class: "tiny-input__label",
ref: "label"
},
toDisplayString(_ctx.label),
513
/* TEXT, NEED_PATCH */
)];
}),
_: 1
/* STABLE */
}, 8, ["content", "onMouseenter"])];
}),
key: "0"
} : void 0]), 1040, ["tabindex", "class", "readonly", "disabled", "size", "name", "placeholder", "onFocus", "onKeydown", "model-value", "title", "display-only", "display-only-content", "onChange", "onMouseenter"])), [[_directive_clickoutside, _ctx.handleClose]]) : withDirectives((openBlock(), createElementBlock(
"div",
{
key: 2,
class: normalizeClass(["tiny-date-editor tiny-range-editor tiny-input tiny-input__inner", ["tiny-date-editor--" + _ctx.state.type, _ctx.state.pickerSize ? "tiny-range-editor--" + _ctx.state.pickerSize : "", _ctx.state.pickerDisabled ? "is-disabled" : "", _ctx.state.pickerVisible ? "is-active" : "", _ctx.state.isDisplayOnly ? "is-display-only" : ""]]),
onClick: _cache[11] || (_cache[11] = function() {
return _ctx.handleFocus && _ctx.handleFocus.apply(_ctx, arguments);
}),
onMouseenter: _cache[12] || (_cache[12] = function() {
return _ctx.handleMouseEnter && _ctx.handleMouseEnter.apply(_ctx, arguments);
}),
onMouseleave: _cache[13] || (_cache[13] = function($event) {
return _ctx.state.showClose = false;
}),
onKeydown: _cache[14] || (_cache[14] = function() {
return _ctx.handleKeydown && _ctx.handleKeydown.apply(_ctx, arguments);
}),
ref: "reference"
},
[createVNode(_component_tiny_tooltip, {
effect: "light",
content: _ctx.state.labelTooltip,
placement: "top",
onMouseenter: _ctx.handleEnterPickerlabel
}, {
default: withCtx(function() {
return [_ctx.label ? (openBlock(), createElementBlock(
"span",
{
key: 0,
class: "tiny-input__label",
ref: "label"
},
toDisplayString(_ctx.label),
513
/* TEXT, NEED_PATCH */
)) : createCommentVNode("v-if", true)];
}),
_: 1
/* STABLE */
}, 8, ["content", "onMouseenter"]), createElementVNode("input", mergeProps({
autocomplete: "off",
placeholder: _ctx.startPlaceholder,
value: _ctx.state.displayValue && _ctx.state.displayValue[0],
disabled: _ctx.state.pickerDisabled
}, _ctx.state.firstInputId, {
readonly: !_ctx.editable || _ctx.readonly,
name: _ctx.name && _ctx.name[0],
onInput: _cache[4] || (_cache[4] = function() {
return _ctx.handleStartInput && _ctx.handleStartInput.apply(_ctx, arguments);
}),
onChange: _cache[5] || (_cache[5] = function() {
return _ctx.handleStartChange && _ctx.handleStartChange.apply(_ctx, arguments);
}),
onFocus: _cache[6] || (_cache[6] = function() {
return _ctx.handleFocus && _ctx.handleFocus.apply(_ctx, arguments);
}),
class: "tiny-range-input"
}), null, 16, _hoisted_3), renderSlot(_ctx.$slots, "range-separator", {}, function() {
return [typeof _ctx.rangeSeparator === "string" ? (openBlock(), createElementBlock(
"span",
_hoisted_4,
toDisplayString(_ctx.rangeSeparator),
1
/* TEXT */
)) : (openBlock(), createBlock(resolveDynamicComponent(_ctx.rangeSeparator), {
key: 1
}))];
}), createElementVNode("input", mergeProps({
autocomplete: "off",
placeholder: _ctx.endPlaceholder,
value: _ctx.state.displayValue && _ctx.state.displayValue[1],
disabled: _ctx.state.pickerDisabled
}, _ctx.state.secondInputId, {
readonly: !_ctx.editable || _ctx.readonly,
name: _ctx.name && _ctx.name[1],
onInput: _cache[7] || (_cache[7] = function() {
return _ctx.handleEndInput && _ctx.handleEndInput.apply(_ctx, arguments);
}),
onChange: _cache[8] || (_cache[8] = function() {
return _ctx.handleEndChange && _ctx.handleEndChange.apply(_ctx, arguments);
}),
onFocus: _cache[9] || (_cache[9] = function() {
return _ctx.handleFocus && _ctx.handleFocus.apply(_ctx, arguments);
}),
class: "tiny-range-input"
}), null, 16, _hoisted_5), _ctx.state.haveTrigger ? (openBlock(), createElementBlock("i", {
key: 0,
onClick: _cache[10] || (_cache[10] = function() {
return _ctx.handleClickIcon && _ctx.handleClickIcon.apply(_ctx, arguments);
}),
class: "tiny-input__icon tiny-range__close-icon"
}, [createVNode(Transition, {
name: "tiny-transition-icon-scale-in"
}, {
default: withCtx(function() {
return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.state.showClose ? _ctx.clearIcon : null)))];
}),
_: 1
/* STABLE */
})])) : createCommentVNode("v-if", true), !_ctx.state.isDisplayOnly ? (openBlock(), createElementBlock("i", _hoisted_6, [(openBlock(), createBlock(resolveDynamicComponent(_ctx.state.triggerClass)))])) : createCommentVNode("v-if", true), _ctx.state.isDisplayOnly ? (openBlock(), createBlock(_component_tiny_tooltip, {
key: 2,
class: "tiny-range-editor-display-only",
content: _ctx.state.displayOnlyTooltip,
effect: "light",
placement: "top",
onMouseenter: _ctx.handleEnterDisplayOnlyContent
}, {
default: withCtx(function() {
return [createElementVNode(
"span",
null,
toDisplayString(_ctx.state.displayValue && _ctx.state.displayValue.join(" " + _ctx.t("ui.datepicker.to") + " ")),
1
/* TEXT */
)];
}),
_: 1
/* STABLE */
}, 8, ["content", "onMouseenter"])) : createCommentVNode("v-if", true)],
34
/* CLASS, NEED_HYDRATION */
)), [[_directive_clickoutside, _ctx.handleClose]]), (openBlock(), createBlock(resolveDynamicComponent(_ctx.state.panel), {
step: _ctx.step,
"show-week-number": _ctx.showWeekNumber,
"time-editable": _ctx.timeEditable,
"format-weeks": _ctx.formatWeeks,
ref: "picker",
visible: _ctx.state.pickerVisible,
onPick: _ctx.handlePick,
onSelectRange: _ctx.handleSelectRange,
onSelectChange: _ctx.handleSelectChange
}, null, 40, ["step", "show-week-number", "time-editable", "format-weeks", "visible", "onPick", "onSelectRange", "onSelectChange"]))],
512
/* NEED_PATCH */
);
}
var Picker = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
var version = "3.12.0";
var version = "3.13.0-alpha.0";
Picker.model = {

@@ -477,0 +180,0 @@ prop: "modelValue",

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

@@ -10,12 +10,18 @@ "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-locale": "~3.12.0",
"@opentiny/vue-date-panel": "~3.12.0",
"@opentiny/vue-date-range": "~3.12.0",
"@opentiny/vue-month-range": "~3.12.0",
"@opentiny/vue-time": "~3.12.0",
"@opentiny/vue-time-range": "~3.12.0",
"@opentiny/vue-time-panel": "~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-locale": "~3.13.0-alpha.0",
"@opentiny/vue-date-panel": "~3.13.0-alpha.0",
"@opentiny/vue-date-range": "~3.13.0-alpha.0",
"@opentiny/vue-month-range": "~3.13.0-alpha.0",
"@opentiny/vue-time": "~3.13.0-alpha.0",
"@opentiny/vue-time-range": "~3.13.0-alpha.0",
"@opentiny/vue-time-panel": "~3.13.0-alpha.0",
"@opentiny/vue-year-range": "~3.13.0-alpha.0",
"@opentiny/vue-tooltip": "~3.13.0-alpha.0",
"@opentiny/vue-filter-box": "~3.13.0-alpha.0",
"@opentiny/vue-date-picker-mobile-first": "~3.13.0-alpha.0",
"@opentiny/vue-time-picker-mobile": "~3.13.0-alpha.0",
"@opentiny/vue-icon": "~3.13.0-alpha.0"
},

@@ -22,0 +28,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