vue3-time-duration 0.3.4 → 0.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- .icon-x-mark[data-v-7f1f4e49]{display:flex}.ui-widget-time[data-v-157c9b55]{position:relative}.ui-widget-time__w[data-v-157c9b55]{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--color-border);border-radius:12px;padding:8px 8px 8px 2px;background-color:var(--bg-element);height:24px}.ui-widget-time__w-input[data-v-157c9b55]{background-color:var(--bg-element);border:1px solid var(--bg-element);color:var(--color-font);font-size:var(--size-font);margin-left:3px;width:100%}.ui-widget-time__w-input[data-v-157c9b55]:focus{outline-color:var(--bg-element);outline-style:solid}.ui-widget-time__w-icon[data-v-157c9b55]{cursor:pointer}.ui-widget-time__dropdown[data-v-157c9b55]{position:absolute;left:0;right:0;max-height:150px;margin:4px;padding:6px;background:#fff;z-index:1;border:1px solid #f5f5f5;border-radius:6px;box-shadow:0 0 8px 4px #0000000a;overflow-y:auto}.ui-widget-time__dropdown-item[data-v-157c9b55]{padding:6px 4px;cursor:pointer;font-size:var(--size-font)}.ui-widget-time__dropdown-item_selected[data-v-157c9b55]{background:var(--bg-selected);border-radius:6px}body{margin:0;padding:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.vue3-time-duration{--bg-element: #ffffff;--bg-selected: #f3f3f3;--color-border: rgb(223, 230, 238);--color-font: #333;--size-font: 14px}.vue3-time-duration__t{display:flex;align-items:center}.vue3-time-duration__t-left{margin-right:6px}.vue3-time-duration__t-right{margin-left:6px}
1
+ .icon-x-mark[data-v-7f1f4e49]{display:flex}.ui-widget-time[data-v-82ab8f2d]{position:relative}.ui-widget-time__w[data-v-82ab8f2d]{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--color-border);border-radius:12px;padding:8px 8px 8px 2px;background-color:var(--bg-element);height:24px}.ui-widget-time__w_error[data-v-82ab8f2d]{border:1px solid var(--color-border-error);background-color:var(--bg-element-error)}.ui-widget-time__w-input[data-v-82ab8f2d]{background-color:var(--bg-element);border:1px solid var(--bg-element);color:var(--color-font);font-size:var(--size-font);margin-left:3px;width:100%}.ui-widget-time__w-input_error[data-v-82ab8f2d]{background-color:var(--bg-element-error);border:1px solid var(--bg-element-error)}.ui-widget-time__w-input[data-v-82ab8f2d]:focus{outline-color:var(--bg-element);outline-style:solid}.ui-widget-time__w-icon[data-v-82ab8f2d]{cursor:pointer}.ui-widget-time__dropdown[data-v-82ab8f2d]{position:absolute;left:0;right:0;max-height:150px;margin:4px;padding:6px;background:#fff;z-index:1;border:1px solid #f5f5f5;border-radius:6px;box-shadow:0 0 8px 4px #0000000a;overflow-y:auto}.ui-widget-time__dropdown-item[data-v-82ab8f2d]{padding:6px 4px;cursor:pointer;font-size:var(--size-font)}.ui-widget-time__dropdown-item_selected[data-v-82ab8f2d]{background:var(--bg-selected);border-radius:6px}body{margin:0;padding:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.vue3-time-duration{--bg-element: #ffffff;--bg-selected: #f3f3f3;--color-border: rgb(223, 230, 238);--bg-element-error: #ffe9e9;--color-border-error: rgb(236, 157, 157);--color-font: #333;--size-font: 14px}.vue3-time-duration__t{display:flex;align-items:center}.vue3-time-duration__t-mdash{font-size:12px}.vue3-time-duration__t-left{margin-right:6px}.vue3-time-duration__t-right{margin-left:6px}
@@ -1,30 +1,31 @@
1
- import { createElementBlock as w, openBlock as I, createStaticVNode as M, defineComponent as B, ref as o, computed as L, watch as R, createElementVNode as x, createCommentVNode as b, withDirectives as D, createVNode as N, vModelText as P, Fragment as U, renderList as W, normalizeClass as A, toDisplayString as y, onMounted as H, vShow as O } from "vue";
2
- const F = (p, v) => {
3
- const r = p.__vccOpts || p;
4
- for (const [g, c] of v)
5
- r[g] = c;
6
- return r;
1
+ import { createElementBlock as g, openBlock as w, createStaticVNode as P, defineComponent as V, ref as d, computed as L, watch as R, createElementVNode as x, createCommentVNode as F, normalizeClass as B, withDirectives as M, createVNode as $, vModelText as U, Fragment as W, renderList as A, toDisplayString as k, onMounted as H, vShow as O } from "vue";
2
+ const b = (p, c) => {
3
+ const n = p.__vccOpts || p;
4
+ for (const [I, v] of c)
5
+ n[I] = v;
6
+ return n;
7
7
  }, z = {}, X = { class: "icon-x-mark" };
8
- function Z(p, v) {
9
- return I(), w("div", X, v[0] || (v[0] = [
10
- M('<svg width="20.000000" height="20.000000" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-v-7f1f4e49><desc data-v-7f1f4e49>Created with Pixso.</desc><defs data-v-7f1f4e49><clipPath id="clip131_5974" data-v-7f1f4e49><rect id="user-time" width="20.000000" height="20.000000" fill="white" fill-opacity="0" data-v-7f1f4e49></rect></clipPath></defs><g clip-path="url(#clip131_5974)" data-v-7f1f4e49><path id="path (Border)" d="M3.72 3.72C3.47 3.97 3.47 4.36 3.72 4.6L9.11 10L3.72 15.39C3.47 15.63 3.47 16.02 3.72 16.27C3.97 16.52 4.36 16.52 4.6 16.27L10 10.88L15.39 16.27C15.63 16.52 16.02 16.52 16.27 16.27C16.52 16.02 16.52 15.63 16.27 15.39L10.88 10L16.27 4.6C16.39 4.48 16.45 4.33 16.45 4.16C16.45 3.99 16.39 3.84 16.27 3.72C16.15 3.6 16 3.54 15.83 3.54C15.66 3.54 15.51 3.6 15.39 3.72L10 9.11L4.6 3.72C4.36 3.47 3.97 3.47 3.72 3.72Z" fill="#77797C" fill-opacity="1.000000" fill-rule="evenodd" data-v-7f1f4e49></path></g></svg>', 1)
8
+ function Z(p, c) {
9
+ return w(), g("div", X, c[0] || (c[0] = [
10
+ P('<svg width="20.000000" height="20.000000" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-v-7f1f4e49><desc data-v-7f1f4e49>Created with Pixso.</desc><defs data-v-7f1f4e49><clipPath id="clip131_5974" data-v-7f1f4e49><rect id="user-time" width="20.000000" height="20.000000" fill="white" fill-opacity="0" data-v-7f1f4e49></rect></clipPath></defs><g clip-path="url(#clip131_5974)" data-v-7f1f4e49><path id="path (Border)" d="M3.72 3.72C3.47 3.97 3.47 4.36 3.72 4.6L9.11 10L3.72 15.39C3.47 15.63 3.47 16.02 3.72 16.27C3.97 16.52 4.36 16.52 4.6 16.27L10 10.88L15.39 16.27C15.63 16.52 16.02 16.52 16.27 16.27C16.52 16.02 16.52 15.63 16.27 15.39L10.88 10L16.27 4.6C16.39 4.48 16.45 4.33 16.45 4.16C16.45 3.99 16.39 3.84 16.27 3.72C16.15 3.6 16 3.54 15.83 3.54C15.66 3.54 15.51 3.6 15.39 3.72L10 9.11L4.6 3.72C4.36 3.47 3.97 3.47 3.72 3.72Z" fill="#77797C" fill-opacity="1.000000" fill-rule="evenodd" data-v-7f1f4e49></path></g></svg>', 1)
11
11
  ]));
12
12
  }
13
- const j = /* @__PURE__ */ F(z, [["render", Z], ["__scopeId", "data-v-7f1f4e49"]]), q = { class: "ui-widget-time" }, G = { class: "ui-widget-time__w" }, J = {
13
+ const j = /* @__PURE__ */ b(z, [["render", Z], ["__scopeId", "data-v-7f1f4e49"]]), q = { class: "ui-widget-time" }, G = {
14
14
  key: 0,
15
15
  class: "ui-widget-time__dropdown"
16
- }, K = ["onClick"], Q = /* @__PURE__ */ B({
16
+ }, J = ["onClick"], K = /* @__PURE__ */ V({
17
17
  __name: "UiWidgetTime",
18
18
  props: {
19
19
  timeListId: { type: Number, default: 0 },
20
- timeList: { type: Array, default: [] }
20
+ timeList: { type: Array, default: [] },
21
+ isError: { type: Boolean, default: !1 }
21
22
  },
22
23
  emits: ["selectedId"],
23
- setup(p, { emit: v }) {
24
- const r = p, g = v, c = o([]), a = o(!1), l = o(0), u = o(void 0), h = o(), m = o(!1), k = o(), S = o(0), f = L(() => c.value.length > 0 ? c.value : r.timeList), C = L(() => r.timeListId), _ = L({
24
+ setup(p, { emit: c }) {
25
+ const n = p, I = c, v = d([]), s = d(!1), l = d(0), u = d(void 0), h = d(), m = d(!1), y = d(), S = d(0), f = L(() => v.value.length > 0 ? v.value : n.timeList), C = L(() => n.timeListId), _ = L({
25
26
  get() {
26
27
  var e;
27
- return u.value === void 0 ? (e = r.timeList.find((i) => i.id === C.value)) == null ? void 0 : e.time : u.value;
28
+ return u.value === void 0 ? (e = n.timeList.find((i) => i.id === C.value)) == null ? void 0 : e.time : u.value;
28
29
  },
29
30
  set(e) {
30
31
  u.value = e;
@@ -32,117 +33,127 @@ const j = /* @__PURE__ */ F(z, [["render", Z], ["__scopeId", "data-v-7f1f4e49"]]
32
33
  });
33
34
  R(C, (e) => {
34
35
  var i;
35
- l.value = e, _.value = (i = r.timeList.find((d) => d.id === e)) == null ? void 0 : i.time;
36
+ l.value = e, _.value = (i = n.timeList.find((r) => r.id === e)) == null ? void 0 : i.time;
36
37
  });
37
- const T = (e) => {
38
+ const E = (e) => {
38
39
  var i;
39
- l.value = e, _.value = (i = f.value.find((d) => d.id === l.value)) == null ? void 0 : i.time, a.value = !1, g("selectedId", l.value);
40
- }, E = () => {
41
- a.value = !0, setTimeout(() => {
40
+ l.value = e, _.value = (i = f.value.find((r) => r.id === l.value)) == null ? void 0 : i.time, s.value = !1, I("selectedId", l.value);
41
+ }, T = () => {
42
+ s.value = !0, setTimeout(() => {
42
43
  var i;
43
- const e = k.value;
44
- e !== null && (S.value = f.value.findIndex((d) => Number(d.id) === l.value), (i = e[S.value]) == null || i.scrollIntoView());
44
+ const e = y.value;
45
+ e !== null && (S.value = f.value.findIndex((r) => Number(r.id) === l.value), (i = e[S.value]) == null || i.scrollIntoView());
45
46
  }, 250);
46
47
  }, t = () => {
47
48
  setTimeout(() => {
48
49
  var e, i;
49
- m.value || (_.value = (e = f.value.find((d) => d.id === l.value)) == null ? void 0 : e.time, g("selectedId", (i = f.value.find((d) => d.id === l.value)) == null ? void 0 : i.id), a.value = !1);
50
+ m.value || (_.value = (e = f.value.find((r) => r.id === l.value)) == null ? void 0 : e.time, I("selectedId", (i = f.value.find((r) => r.id === l.value)) == null ? void 0 : i.id), s.value = !1);
50
51
  }, 200), m.value = !1;
51
- }, n = () => {
52
- l.value = 0, c.value = [], _.value = "", h.value.focus(), m.value = !0, a.value = !0;
53
- }, s = () => {
54
- c.value = r.timeList.filter((e) => e.time.startsWith(u.value));
52
+ }, a = () => {
53
+ l.value = 0, v.value = [], _.value = "", h.value.focus(), m.value = !0, s.value = !0;
54
+ }, o = () => {
55
+ v.value = n.timeList.filter((e) => e.time.startsWith(u.value));
55
56
  };
56
- return (e, i) => (I(), w("div", q, [
57
- x("div", G, [
58
- D(x("input", {
57
+ return (e, i) => (w(), g("div", q, [
58
+ x("div", {
59
+ class: B({ "ui-widget-time__w": !0, "ui-widget-time__w_error": n.isError })
60
+ }, [
61
+ M(x("input", {
59
62
  ref_key: "inputRef",
60
63
  ref: h,
61
- "onUpdate:modelValue": i[0] || (i[0] = (d) => _.value = d),
64
+ "onUpdate:modelValue": i[0] || (i[0] = (r) => _.value = r),
62
65
  type: "text",
63
- class: "ui-widget-time__w-input",
64
- onClick: E,
66
+ class: B({ "ui-widget-time__w-input": !0, "ui-widget-time__w-input_error": n.isError }),
67
+ onClick: T,
65
68
  onFocusout: t,
66
- onInput: s
67
- }, null, 544), [
68
- [P, _.value]
69
+ onInput: o
70
+ }, null, 34), [
71
+ [U, _.value]
69
72
  ]),
70
- N(j, {
73
+ $(j, {
71
74
  class: "ui-widget-time__w-icon",
72
- onClick: n
75
+ onClick: a
73
76
  })
74
- ]),
75
- a.value ? (I(), w("div", J, [
76
- (I(!0), w(U, null, W(f.value, (d, V) => (I(), w("div", { key: V }, [
77
+ ], 2),
78
+ s.value ? (w(), g("div", G, [
79
+ (w(!0), g(W, null, A(f.value, (r, D) => (w(), g("div", { key: D }, [
77
80
  x("div", {
78
81
  ref_for: !0,
79
82
  ref_key: "refItemList",
80
- ref: k,
81
- class: A({
83
+ ref: y,
84
+ class: B({
82
85
  "ui-widget-time__dropdown-item": !0,
83
- "ui-widget-time__dropdown-item_selected": S.value === V
86
+ "ui-widget-time__dropdown-item_selected": S.value === D
84
87
  }),
85
- onClick: (te) => T(d.id)
86
- }, y(d.time), 11, K)
88
+ onClick: (te) => E(r.id)
89
+ }, k(r.time), 11, J)
87
90
  ]))), 128))
88
- ])) : b("", !0)
91
+ ])) : F("", !0)
89
92
  ]));
90
93
  }
91
- }), $ = /* @__PURE__ */ F(Q, [["__scopeId", "data-v-157c9b55"]]), Y = { class: "vue3-time-duration" }, ee = { class: "vue3-time-duration__t" }, le = /* @__PURE__ */ B({
94
+ }), N = /* @__PURE__ */ b(K, [["__scopeId", "data-v-82ab8f2d"]]), Q = { class: "vue3-time-duration" }, Y = { class: "vue3-time-duration__t" }, ee = {
95
+ key: 0,
96
+ class: "vue3-time-duration__t-mdash"
97
+ }, le = /* @__PURE__ */ V({
92
98
  __name: "App",
93
99
  props: {
94
100
  initStart: { default: () => "00:00" },
95
- initEnd: { default: () => "00:05" }
101
+ initEnd: { default: () => "00:05" },
102
+ isDash: { type: Boolean, default: () => !1 },
103
+ isError: { type: Boolean, default: () => !1 }
96
104
  },
97
105
  emits: ["duration"],
98
- setup(p, { emit: v }) {
99
- const r = p, g = v, c = o(0), a = o([]), l = o(), u = o(), h = o(), m = o(), k = L(() => {
106
+ setup(p, { emit: c }) {
107
+ const n = p, I = c, v = d(0), s = d([]), l = d(), u = d(), h = d(), m = d(), y = L(() => {
100
108
  var t;
101
- return l.value = C(r.initStart), h.value = (t = a.value.find((n) => n.id === l.value)) == null ? void 0 : t.time, r.initStart;
109
+ return l.value = C(n.initStart), h.value = (t = s.value.find((a) => a.id === l.value)) == null ? void 0 : t.time, n.initStart;
102
110
  }), S = L(() => {
103
111
  var t;
104
- return u.value = C(r.initEnd), m.value = (t = a.value.find((n) => n.id === u.value)) == null ? void 0 : t.time, r.initEnd;
112
+ return u.value = C(n.initEnd), m.value = (t = s.value.find((a) => a.id === u.value)) == null ? void 0 : t.time, n.initEnd;
105
113
  });
106
114
  H(() => {
107
- _(), c.value = a.value.length - 1;
115
+ _(), v.value = s.value.length - 1;
108
116
  });
109
117
  const f = L(
110
118
  () => ({ start: h.value, end: m.value })
111
119
  );
112
120
  R(f, (t) => {
113
- g("duration", { start: t.start, end: t.end });
121
+ I("duration", { start: t.start, end: t.end });
114
122
  });
115
123
  const C = (t) => {
116
- var n;
117
- return (n = a.value.find((s) => s.time === t)) == null ? void 0 : n.id;
124
+ var a;
125
+ return (a = s.value.find((o) => o.time === t)) == null ? void 0 : a.id;
118
126
  }, _ = () => {
119
- let t = -1, n = "", s = 0, e = "";
127
+ let t = -1, a = "", o = 0, e = "";
120
128
  for (let i = 0; i < 288; i++)
121
- s >= 60 && (s = 0), i % 12 === 0 && (t += 1), n = t.toString().length === 1 ? "0" + t.toString() : t.toString(), e = s.toString().length === 1 ? "0" + s.toString() : s.toString(), a.value.push({ id: i, time: n + ":" + e }), s += 5;
122
- }, T = (t) => {
123
- var n, s;
124
- l.value = t, u.value = t >= u.value ? t + 1 : u.value, u.value > c.value && (u.value = 0), h.value = (n = a.value.find((e) => e.id === l.value)) == null ? void 0 : n.time, m.value = (s = a.value.find((e) => e.id === u.value)) == null ? void 0 : s.time;
129
+ o >= 60 && (o = 0), i % 12 === 0 && (t += 1), a = t.toString().length === 1 ? "0" + t.toString() : t.toString(), e = o.toString().length === 1 ? "0" + o.toString() : o.toString(), s.value.push({ id: i, time: a + ":" + e }), o += 5;
125
130
  }, E = (t) => {
126
- var n, s;
127
- u.value = t, l.value = t <= l.value ? t - 1 : l.value, l.value < 0 && (l.value = c.value), h.value = (n = a.value.find((e) => e.id === l.value)) == null ? void 0 : n.time, m.value = (s = a.value.find((e) => e.id === u.value)) == null ? void 0 : s.time;
131
+ var a, o;
132
+ l.value = t, u.value = t >= u.value ? t + 1 : u.value, u.value > v.value && (u.value = 0), h.value = (a = s.value.find((e) => e.id === l.value)) == null ? void 0 : a.time, m.value = (o = s.value.find((e) => e.id === u.value)) == null ? void 0 : o.time;
133
+ }, T = (t) => {
134
+ var a, o;
135
+ u.value = t, l.value = t <= l.value ? t - 1 : l.value, l.value < 0 && (l.value = v.value), h.value = (a = s.value.find((e) => e.id === l.value)) == null ? void 0 : a.time, m.value = (o = s.value.find((e) => e.id === u.value)) == null ? void 0 : o.time;
128
136
  };
129
- return (t, n) => (I(), w("div", Y, [
130
- D(x("div", null, y(f.value) + " " + y(k.value) + " " + y(S.value), 513), [
137
+ return (t, a) => (w(), g("div", Q, [
138
+ M(x("div", null, k(f.value) + " " + k(y.value) + " " + k(S.value), 513), [
131
139
  [O, !1]
132
140
  ]),
133
- x("div", ee, [
134
- N($, {
141
+ x("div", Y, [
142
+ $(N, {
135
143
  class: "vue3-time-duration__t-left",
136
- "time-list": a.value,
144
+ "time-list": s.value,
137
145
  "time-list-id": l.value,
138
- onSelectedId: T
139
- }, null, 8, ["time-list", "time-list-id"]),
140
- N($, {
146
+ "is-error": n.isError,
147
+ onSelectedId: E
148
+ }, null, 8, ["time-list", "time-list-id", "is-error"]),
149
+ t.isDash ? (w(), g("div", ee, "—")) : F("", !0),
150
+ $(N, {
141
151
  class: "vue3-time-duration__t-right",
142
- "time-list": a.value,
152
+ "time-list": s.value,
143
153
  "time-list-id": u.value,
144
- onSelectedId: E
145
- }, null, 8, ["time-list", "time-list-id"])
154
+ "is-error": n.isError,
155
+ onSelectedId: T
156
+ }, null, 8, ["time-list", "time-list-id", "is-error"])
146
157
  ])
147
158
  ]));
148
159
  }
@@ -1 +1 @@
1
- (function(e,g){typeof exports=="object"&&typeof module<"u"?module.exports=g(require("vue")):typeof define=="function"&&define.amd?define(["vue"],g):(e=typeof globalThis<"u"?globalThis:e||self,e["vue3-time-duration"]=g(e.Vue))})(this,function(e){"use strict";const g=(_,m)=>{const c=_.__vccOpts||_;for(const[w,u]of m)c[w]=u;return c},B={},E={class:"icon-x-mark"};function V(_,m){return e.openBlock(),e.createElementBlock("div",E,m[0]||(m[0]=[e.createStaticVNode('<svg width="20.000000" height="20.000000" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-v-7f1f4e49><desc data-v-7f1f4e49>Created with Pixso.</desc><defs data-v-7f1f4e49><clipPath id="clip131_5974" data-v-7f1f4e49><rect id="user-time" width="20.000000" height="20.000000" fill="white" fill-opacity="0" data-v-7f1f4e49></rect></clipPath></defs><g clip-path="url(#clip131_5974)" data-v-7f1f4e49><path id="path (Border)" d="M3.72 3.72C3.47 3.97 3.47 4.36 3.72 4.6L9.11 10L3.72 15.39C3.47 15.63 3.47 16.02 3.72 16.27C3.97 16.52 4.36 16.52 4.6 16.27L10 10.88L15.39 16.27C15.63 16.52 16.02 16.52 16.27 16.27C16.52 16.02 16.52 15.63 16.27 15.39L10.88 10L16.27 4.6C16.39 4.48 16.45 4.33 16.45 4.16C16.45 3.99 16.39 3.84 16.27 3.72C16.15 3.6 16 3.54 15.83 3.54C15.66 3.54 15.51 3.6 15.39 3.72L10 9.11L4.6 3.72C4.36 3.47 3.97 3.47 3.72 3.72Z" fill="#77797C" fill-opacity="1.000000" fill-rule="evenodd" data-v-7f1f4e49></path></g></svg>',1)]))}const N=g(B,[["render",V],["__scopeId","data-v-7f1f4e49"]]),T={class:"ui-widget-time"},D={class:"ui-widget-time__w"},$={key:0,class:"ui-widget-time__dropdown"},R=["onClick"],x=g(e.defineComponent({__name:"UiWidgetTime",props:{timeListId:{type:Number,default:0},timeList:{type:Array,default:[]}},emits:["selectedId"],setup(_,{emit:m}){const c=_,w=m,u=e.ref([]),a=e.ref(!1),l=e.ref(0),d=e.ref(void 0),h=e.ref(),f=e.ref(!1),S=e.ref(),I=e.ref(0),p=e.computed(()=>u.value.length>0?u.value:c.timeList),k=e.computed(()=>c.timeListId),v=e.computed({get(){var t;return d.value===void 0?(t=c.timeList.find(n=>n.id===k.value))==null?void 0:t.time:d.value},set(t){d.value=t}});e.watch(k,t=>{var n;l.value=t,v.value=(n=c.timeList.find(r=>r.id===t))==null?void 0:n.time});const L=t=>{var n;l.value=t,v.value=(n=p.value.find(r=>r.id===l.value))==null?void 0:n.time,a.value=!1,w("selectedId",l.value)},C=()=>{a.value=!0,setTimeout(()=>{var n;const t=S.value;t!==null&&(I.value=p.value.findIndex(r=>Number(r.id)===l.value),(n=t[I.value])==null||n.scrollIntoView())},250)},i=()=>{setTimeout(()=>{var t,n;f.value||(v.value=(t=p.value.find(r=>r.id===l.value))==null?void 0:t.time,w("selectedId",(n=p.value.find(r=>r.id===l.value))==null?void 0:n.id),a.value=!1)},200),f.value=!1},o=()=>{l.value=0,u.value=[],v.value="",h.value.focus(),f.value=!0,a.value=!0},s=()=>{u.value=c.timeList.filter(t=>t.time.startsWith(d.value))};return(t,n)=>(e.openBlock(),e.createElementBlock("div",T,[e.createElementVNode("div",D,[e.withDirectives(e.createElementVNode("input",{ref_key:"inputRef",ref:h,"onUpdate:modelValue":n[0]||(n[0]=r=>v.value=r),type:"text",class:"ui-widget-time__w-input",onClick:C,onFocusout:i,onInput:s},null,544),[[e.vModelText,v.value]]),e.createVNode(N,{class:"ui-widget-time__w-icon",onClick:o})]),a.value?(e.openBlock(),e.createElementBlock("div",$,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.value,(r,y)=>(e.openBlock(),e.createElementBlock("div",{key:y},[e.createElementVNode("div",{ref_for:!0,ref_key:"refItemList",ref:S,class:e.normalizeClass({"ui-widget-time__dropdown-item":!0,"ui-widget-time__dropdown-item_selected":I.value===y}),onClick:U=>L(r.id)},e.toDisplayString(r.time),11,R)]))),128))])):e.createCommentVNode("",!0)]))}}),[["__scopeId","data-v-157c9b55"]]),F={class:"vue3-time-duration"},M={class:"vue3-time-duration__t"};return e.defineComponent({__name:"App",props:{initStart:{default:()=>"00:00"},initEnd:{default:()=>"00:05"}},emits:["duration"],setup(_,{emit:m}){const c=_,w=m,u=e.ref(0),a=e.ref([]),l=e.ref(),d=e.ref(),h=e.ref(),f=e.ref(),S=e.computed(()=>{var i;return l.value=k(c.initStart),h.value=(i=a.value.find(o=>o.id===l.value))==null?void 0:i.time,c.initStart}),I=e.computed(()=>{var i;return d.value=k(c.initEnd),f.value=(i=a.value.find(o=>o.id===d.value))==null?void 0:i.time,c.initEnd});e.onMounted(()=>{v(),u.value=a.value.length-1});const p=e.computed(()=>({start:h.value,end:f.value}));e.watch(p,i=>{w("duration",{start:i.start,end:i.end})});const k=i=>{var o;return(o=a.value.find(s=>s.time===i))==null?void 0:o.id},v=()=>{let i=-1,o="",s=0,t="";for(let n=0;n<288;n++)s>=60&&(s=0),n%12===0&&(i+=1),o=i.toString().length===1?"0"+i.toString():i.toString(),t=s.toString().length===1?"0"+s.toString():s.toString(),a.value.push({id:n,time:o+":"+t}),s+=5},L=i=>{var o,s;l.value=i,d.value=i>=d.value?i+1:d.value,d.value>u.value&&(d.value=0),h.value=(o=a.value.find(t=>t.id===l.value))==null?void 0:o.time,f.value=(s=a.value.find(t=>t.id===d.value))==null?void 0:s.time},C=i=>{var o,s;d.value=i,l.value=i<=l.value?i-1:l.value,l.value<0&&(l.value=u.value),h.value=(o=a.value.find(t=>t.id===l.value))==null?void 0:o.time,f.value=(s=a.value.find(t=>t.id===d.value))==null?void 0:s.time};return(i,o)=>(e.openBlock(),e.createElementBlock("div",F,[e.withDirectives(e.createElementVNode("div",null,e.toDisplayString(p.value)+" "+e.toDisplayString(S.value)+" "+e.toDisplayString(I.value),513),[[e.vShow,!1]]),e.createElementVNode("div",M,[e.createVNode(x,{class:"vue3-time-duration__t-left","time-list":a.value,"time-list-id":l.value,onSelectedId:L},null,8,["time-list","time-list-id"]),e.createVNode(x,{class:"vue3-time-duration__t-right","time-list":a.value,"time-list-id":d.value,onSelectedId:C},null,8,["time-list","time-list-id"])])]))}})});
1
+ (function(e,g){typeof exports=="object"&&typeof module<"u"?module.exports=g(require("vue")):typeof define=="function"&&define.amd?define(["vue"],g):(e=typeof globalThis<"u"?globalThis:e||self,e["vue3-time-duration"]=g(e.Vue))})(this,function(e){"use strict";const g=(v,m)=>{const a=v.__vccOpts||v;for(const[w,u]of m)a[w]=u;return a},B={},x={class:"icon-x-mark"};function V(v,m){return e.openBlock(),e.createElementBlock("div",x,m[0]||(m[0]=[e.createStaticVNode('<svg width="20.000000" height="20.000000" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-v-7f1f4e49><desc data-v-7f1f4e49>Created with Pixso.</desc><defs data-v-7f1f4e49><clipPath id="clip131_5974" data-v-7f1f4e49><rect id="user-time" width="20.000000" height="20.000000" fill="white" fill-opacity="0" data-v-7f1f4e49></rect></clipPath></defs><g clip-path="url(#clip131_5974)" data-v-7f1f4e49><path id="path (Border)" d="M3.72 3.72C3.47 3.97 3.47 4.36 3.72 4.6L9.11 10L3.72 15.39C3.47 15.63 3.47 16.02 3.72 16.27C3.97 16.52 4.36 16.52 4.6 16.27L10 10.88L15.39 16.27C15.63 16.52 16.02 16.52 16.27 16.27C16.52 16.02 16.52 15.63 16.27 15.39L10.88 10L16.27 4.6C16.39 4.48 16.45 4.33 16.45 4.16C16.45 3.99 16.39 3.84 16.27 3.72C16.15 3.6 16 3.54 15.83 3.54C15.66 3.54 15.51 3.6 15.39 3.72L10 9.11L4.6 3.72C4.36 3.47 3.97 3.47 3.72 3.72Z" fill="#77797C" fill-opacity="1.000000" fill-rule="evenodd" data-v-7f1f4e49></path></g></svg>',1)]))}const N=g(B,[["render",V],["__scopeId","data-v-7f1f4e49"]]),T={class:"ui-widget-time"},D={key:0,class:"ui-widget-time__dropdown"},$=["onClick"],E=g(e.defineComponent({__name:"UiWidgetTime",props:{timeListId:{type:Number,default:0},timeList:{type:Array,default:[]},isError:{type:Boolean,default:!1}},emits:["selectedId"],setup(v,{emit:m}){const a=v,w=m,u=e.ref([]),r=e.ref(!1),n=e.ref(0),s=e.ref(void 0),h=e.ref(),f=e.ref(!1),C=e.ref(),k=e.ref(0),p=e.computed(()=>u.value.length>0?u.value:a.timeList),I=e.computed(()=>a.timeListId),_=e.computed({get(){var t;return s.value===void 0?(t=a.timeList.find(l=>l.id===I.value))==null?void 0:t.time:s.value},set(t){s.value=t}});e.watch(I,t=>{var l;n.value=t,_.value=(l=a.timeList.find(c=>c.id===t))==null?void 0:l.time});const S=t=>{var l;n.value=t,_.value=(l=p.value.find(c=>c.id===n.value))==null?void 0:l.time,r.value=!1,w("selectedId",n.value)},y=()=>{r.value=!0,setTimeout(()=>{var l;const t=C.value;t!==null&&(k.value=p.value.findIndex(c=>Number(c.id)===n.value),(l=t[k.value])==null||l.scrollIntoView())},250)},i=()=>{setTimeout(()=>{var t,l;f.value||(_.value=(t=p.value.find(c=>c.id===n.value))==null?void 0:t.time,w("selectedId",(l=p.value.find(c=>c.id===n.value))==null?void 0:l.id),r.value=!1)},200),f.value=!1},o=()=>{n.value=0,u.value=[],_.value="",h.value.focus(),f.value=!0,r.value=!0},d=()=>{u.value=a.timeList.filter(t=>t.time.startsWith(s.value))};return(t,l)=>(e.openBlock(),e.createElementBlock("div",T,[e.createElementVNode("div",{class:e.normalizeClass({"ui-widget-time__w":!0,"ui-widget-time__w_error":a.isError})},[e.withDirectives(e.createElementVNode("input",{ref_key:"inputRef",ref:h,"onUpdate:modelValue":l[0]||(l[0]=c=>_.value=c),type:"text",class:e.normalizeClass({"ui-widget-time__w-input":!0,"ui-widget-time__w-input_error":a.isError}),onClick:y,onFocusout:i,onInput:d},null,34),[[e.vModelText,_.value]]),e.createVNode(N,{class:"ui-widget-time__w-icon",onClick:o})],2),r.value?(e.openBlock(),e.createElementBlock("div",D,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.value,(c,L)=>(e.openBlock(),e.createElementBlock("div",{key:L},[e.createElementVNode("div",{ref_for:!0,ref_key:"refItemList",ref:C,class:e.normalizeClass({"ui-widget-time__dropdown-item":!0,"ui-widget-time__dropdown-item_selected":k.value===L}),onClick:P=>S(c.id)},e.toDisplayString(c.time),11,$)]))),128))])):e.createCommentVNode("",!0)]))}}),[["__scopeId","data-v-82ab8f2d"]]),R={class:"vue3-time-duration"},F={class:"vue3-time-duration__t"},M={key:0,class:"vue3-time-duration__t-mdash"};return e.defineComponent({__name:"App",props:{initStart:{default:()=>"00:00"},initEnd:{default:()=>"00:05"},isDash:{type:Boolean,default:()=>!1},isError:{type:Boolean,default:()=>!1}},emits:["duration"],setup(v,{emit:m}){const a=v,w=m,u=e.ref(0),r=e.ref([]),n=e.ref(),s=e.ref(),h=e.ref(),f=e.ref(),C=e.computed(()=>{var i;return n.value=I(a.initStart),h.value=(i=r.value.find(o=>o.id===n.value))==null?void 0:i.time,a.initStart}),k=e.computed(()=>{var i;return s.value=I(a.initEnd),f.value=(i=r.value.find(o=>o.id===s.value))==null?void 0:i.time,a.initEnd});e.onMounted(()=>{_(),u.value=r.value.length-1});const p=e.computed(()=>({start:h.value,end:f.value}));e.watch(p,i=>{w("duration",{start:i.start,end:i.end})});const I=i=>{var o;return(o=r.value.find(d=>d.time===i))==null?void 0:o.id},_=()=>{let i=-1,o="",d=0,t="";for(let l=0;l<288;l++)d>=60&&(d=0),l%12===0&&(i+=1),o=i.toString().length===1?"0"+i.toString():i.toString(),t=d.toString().length===1?"0"+d.toString():d.toString(),r.value.push({id:l,time:o+":"+t}),d+=5},S=i=>{var o,d;n.value=i,s.value=i>=s.value?i+1:s.value,s.value>u.value&&(s.value=0),h.value=(o=r.value.find(t=>t.id===n.value))==null?void 0:o.time,f.value=(d=r.value.find(t=>t.id===s.value))==null?void 0:d.time},y=i=>{var o,d;s.value=i,n.value=i<=n.value?i-1:n.value,n.value<0&&(n.value=u.value),h.value=(o=r.value.find(t=>t.id===n.value))==null?void 0:o.time,f.value=(d=r.value.find(t=>t.id===s.value))==null?void 0:d.time};return(i,o)=>(e.openBlock(),e.createElementBlock("div",R,[e.withDirectives(e.createElementVNode("div",null,e.toDisplayString(p.value)+" "+e.toDisplayString(C.value)+" "+e.toDisplayString(k.value),513),[[e.vShow,!1]]),e.createElementVNode("div",F,[e.createVNode(E,{class:"vue3-time-duration__t-left","time-list":r.value,"time-list-id":n.value,"is-error":a.isError,onSelectedId:S},null,8,["time-list","time-list-id","is-error"]),i.isDash?(e.openBlock(),e.createElementBlock("div",M,"—")):e.createCommentVNode("",!0),e.createVNode(E,{class:"vue3-time-duration__t-right","time-list":r.value,"time-list-id":s.value,"is-error":a.isError,onSelectedId:y},null,8,["time-list","time-list-id","is-error"])])]))}})});
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "vue3-time-duration",
3
3
  "description": "UI Widget to set a time duration. This is a component for vue 3",
4
- "version": "0.3.4",
4
+ "version": "0.3.5",
5
5
  "private": false,
6
6
  "author": "Egor Lentarev",
7
7
  "license": "MIT",