@opentinyvue/vue-calendar-bar 2.21.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2022 - present TinyVue Authors.
+Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/index.d.ts

@@ -0,0 +1,2 @@
+import CalendarBar from './src/index';
+export default CalendarBar;

package/lib/index.js

@@ -0,0 +1,67 @@
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+import { defineComponent, $prefix, $props, $setup } from "@opentinyvue/vue-common";
+import MobileFirstTemplate from "./mobile-first.js";
+var template = function template2(mode) {
+  var _process$env;
+  typeof process === "object" ? (_process$env = process.env) == null ? void 0 : _process$env.TINY_MODE : null;
+  return MobileFirstTemplate;
+};
+var $constants = {
+  POSITON: {
+    START: "start",
+    CENTER: "center",
+    END: "end"
+  }
+};
+var CalendarBar = defineComponent({
+  name: $prefix + "CalendarBar",
+  props: _extends({}, $props, {
+    _constants: {
+      type: Object,
+      default: function _default() {
+        return $constants;
+      }
+    },
+    modelValue: String,
+    config: {
+      type: Object,
+      default: function _default2() {
+        return {};
+      }
+    },
+    cascaderPosition: {
+      type: String,
+      default: "center",
+      validator: function validator(value) {
+        return Boolean(~Object.values($constants.POSITON).indexOf(value));
+      }
+    }
+  }),
+  setup: function setup(props, context) {
+    return $setup({
+      props,
+      context,
+      template
+    });
+  }
+});
+var version = "2.21.0";
+CalendarBar.model = {
+  prop: "modelValue",
+  event: "update:modelValue"
+};
+CalendarBar.install = function(Vue) {
+  Vue.component(CalendarBar.name, CalendarBar);
+};
+CalendarBar.version = version;
+export {
+  CalendarBar as default
+};

package/lib/mobile-first.js

@@ -0,0 +1,266 @@
+import { renderless, api } from '@opentinyvue/vue-renderless/calendar-bar/vue';
+import { defineComponent, h, props, setup } from '@opentinyvue/vue-common';
+import { IconChevronDown } from '@opentinyvue/vue-icon';
+import CascaderSelect from '@opentinyvue/vue-cascader-select';
+
+function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
+  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
+  if (render) {
+    options.render = render;
+    options.staticRenderFns = staticRenderFns;
+    options._compiled = true;
+  }
+  var hook;
+  if (injectStyles) {
+    hook = injectStyles;
+  }
+  if (hook) {
+    if (options.functional) {
+      options._injectStyles = hook;
+      var originalRender = options.render;
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context);
+        return originalRender(h, context);
+      };
+    } else {
+      var existing = options.beforeCreate;
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+    }
+  }
+  return {
+    exports: scriptExports,
+    options
+  };
+}
+
+var __vue2_script$1 = defineComponent({
+  name: "CalendarItem",
+  props: {
+    text: String,
+    day: [String, Object],
+    config: Object
+  },
+  emits: ["clickday"],
+  render: function render() {
+    var _this = this;
+    var text = this.text, day = this.day, config = this.config, $emit = this.$emit;
+    var renderItem = config.renderItem, render4 = config.render;
+    if (typeof render4 === "function") {
+      return render4({
+        h,
+        item: day,
+        text,
+        config
+      });
+    }
+    var child = typeof renderItem === "function" ? renderItem({
+      h,
+      item: day,
+      text
+    }) : "";
+    var backgroundColorClass = "";
+    var markVnode = null;
+    var ons = {};
+    child = child || h("span", text);
+    if (day && day.disabled) {
+      backgroundColorClass = config && config.disabledBackgroundColorClass || "bg-color-bg-4";
+    } else {
+      ons.click = function() {
+        return $emit.apply(_this, ["clickday", day]);
+      };
+    }
+    if (day && day.type === "cur" && day.isCur) {
+      backgroundColorClass = config && config.currentBackgroundColorClass || "bg-color-brand";
+    }
+    var itemClass = ["w-8 h-8 rounded-sm flex justify-center items-center", day && day.disabled ? "cursor-not-allowed" : "cursor-pointer", backgroundColorClass];
+    var itemAttrs = {
+      class: itemClass,
+      on: ons,
+      attrs: {}
+    };
+    itemAttrs.attrs["data-tag"] = "tiny-mobile-calendar-bar-item";
+    if (day && day.marked) {
+      markVnode = h("div", {
+        class: ["absolute w-1.5 h-1.5 left-1/2 bottom-0.5 -translate-x-1/2 rounded-full cursor-pointer", config && config.markBackgroundColorClass || "bg-color-brand"],
+        attrs: {
+          title: config && config.showMarkMessage ? day.markMsg : ""
+        }
+      });
+    }
+    return h("div", {
+      class: "w-full h-full flex justify-center items-center relative"
+    }, [h("div", itemAttrs, [child]), markVnode]);
+  }
+});
+var __vue2_render, __vue2_staticRenderFns;
+var __cssModules$1 = {};
+var __component__$1 = /* @__PURE__ */ normalizeComponent(__vue2_script$1, __vue2_render, __vue2_staticRenderFns, false, __vue2_injectStyles$1);
+function __vue2_injectStyles$1(context) {
+  for (var o in __cssModules$1) {
+    this[o] = __cssModules$1[o];
+  }
+}
+var CalendarItem = /* @__PURE__ */ function() {
+  return __component__$1.exports;
+}();
+var __vue2_script = defineComponent({
+  emits: ["update:modelValue", "expand", "week-change"],
+  props: [].concat(props, ["modelValue", "config", "cascaderPosition"]),
+  components: {
+    TinyCascaderSelect: CascaderSelect,
+    IconChevronDown: IconChevronDown(),
+    CalendarItem
+  },
+  setup: function setup$1(props2, context) {
+    return setup({
+      props: props2,
+      context,
+      renderless,
+      api
+    });
+  }
+});
+var render2 = function render3() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", {
+    staticClass: "select-none",
+    attrs: {
+      "data-tag": "tiny-calendar-bar"
+    }
+  }, [_c("div", {
+    class: ["w-full h-11 flex items-center text-sm text-color-text-primary", "border-b-0.5 border-solid border-color-border-separator", {
+      "justify-start": _vm.cascaderPosition === "start",
+      "justify-center": _vm.cascaderPosition === "center",
+      "justify-end": _vm.cascaderPosition === "end"
+    }],
+    attrs: {
+      "data-tag": "tiny-calendar-bar-content"
+    }
+  }, [_c("div", {
+    staticClass: "w-max h-6 flex items-center cursor-pointer space-x-1.5",
+    attrs: {
+      "data-tag": "tiny-calendar-bar-visible"
+    },
+    on: {
+      "click": function click($event) {
+        return _vm.setCascaderVisible(true);
+      }
+    }
+  }, [_c("span", [_vm._v(_vm._s(_vm.i18nYearMonth()))]), _c("span", {
+    staticClass: "-translate-y-px fill-color-icon-primary"
+  }, [_c("icon-chevron-down", {
+    class: {
+      "rotate-180": _vm.state.cascaderVisible
+    }
+  })], 1)])]), _c("div", {
+    ref: "weekPanel",
+    staticClass: "w-full h-max overflow-hidden",
+    attrs: {
+      "data-tag": "tiny-calendar-bar-gridbox"
+    }
+  }, [_c("div", {
+    staticClass: "grid grid-cols-7"
+  }, _vm._l(_vm.state.weekDays, function(weekDay) {
+    return _c("div", {
+      key: weekDay,
+      staticClass: "text-xs",
+      style: _vm.state.minSize2,
+      attrs: {
+        "data-tag": "tiny-calendar-bar-weekday"
+      }
+    }, [_c("calendar-item", {
+      attrs: {
+        "text": _vm.t("ui.calendarBar.week." + weekDay),
+        "day": "" + weekDay,
+        "config": _vm.config
+      }
+    })], 1);
+  }), 0), _c("div", {
+    staticClass: "h-max flex relative right-full will-change-transform",
+    style: {
+      "width": " 300%",
+      "transform": "translateX(" + _vm.state.delta + "px)",
+      "transition-duration": _vm.state.duration + "ms"
+    },
+    on: {
+      "touchstart": _vm.touchstart,
+      "touchend": _vm.touchend,
+      "touchmove": _vm.touchmove
+    }
+  }, [_c("div", {
+    ref: "calendarPanel",
+    staticClass: "w-full flex"
+  }, _vm._l(_vm.state.data, function(calendarDays, idx) {
+    return _c("div", {
+      key: idx,
+      staticClass: "grid grid-cols-7",
+      staticStyle: {
+        "width": "33.33%"
+      }
+    }, _vm._l(calendarDays, function(calendarDay) {
+      var _vm$m, _vm$m2;
+      return _c("div", {
+        key: calendarDay.dateStr,
+        class: _vm.m("text-sm", (calendarDay.isCurMon || _vm.state.showWeek) && calendarDay.isWorkday ? _vm.config.workdayColorClass || "text-color-icon-primary" : _vm.config.holidayColorClass || "text-color-icon-placeholder", (_vm$m = {}, _vm$m[_vm.config.disabledColorClass || "text-color-icon-disabled"] = calendarDay.disabled, _vm$m), (_vm$m2 = {}, _vm$m2[_vm.config.currentColorClass || "text-color-icon-inverse"] = calendarDay.type === "cur" && calendarDay.isCur, _vm$m2)),
+        style: _vm.state.minSize3
+      }, [_c("calendar-item", {
+        attrs: {
+          "text": "" + calendarDay.dateArr[2],
+          "day": calendarDay,
+          "config": _vm.config
+        },
+        on: {
+          "clickday": _vm.handleClickDay
+        }
+      })], 1);
+    }), 0);
+  }), 0)]), _c("div", {
+    staticClass: "w-full h-4 flex justify-center items-center"
+  }, [_c("div", {
+    staticClass: "w-6 h-full flex justify-center items-center",
+    on: {
+      "click": _vm.handleDraggerClick,
+      "mousedown": _vm.handleDraggerMousedown,
+      "touchstart": _vm.handleDraggerTouchstart,
+      "touchend": _vm.handleDraggerTouchend,
+      "touchmove": function touchmove($event) {
+        $event.preventDefault();
+        return _vm.throttledHandleDraggerTouchmove.apply(null, arguments);
+      }
+    }
+  }, [_c("div", {
+    class: ["box-content w-6 h-px cursor-pointer bg-color-border-separator rounded-sm", "border-y border-solid border-color-border-separator"]
+  })])])]), _c("tiny-cascader-select", _vm._b({
+    attrs: {
+      "cycle-roll": "",
+      "options": _vm.state.cascaderOptions,
+      "visible": _vm.state.cascaderVisible
+    },
+    on: {
+      "update:modelValue": _vm.handleCascaderChange,
+      "update:visible": _vm.setCascaderVisible
+    },
+    model: {
+      value: _vm.state.cascaderCurrent,
+      callback: function callback($$v) {
+        _vm.$set(_vm.state, "cascaderCurrent", $$v);
+      },
+      expression: "state.cascaderCurrent"
+    }
+  }, "tiny-cascader-select", _vm.config.cascaderOp, false))], 1);
+};
+var staticRenderFns = [];
+var __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, render2, staticRenderFns, false, __vue2_injectStyles);
+function __vue2_injectStyles(context) {
+  for (var o in __cssModules) {
+    this[o] = __cssModules[o];
+  }
+}
+var mobileFirst = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+
+export { mobileFirst as default };

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@opentinyvue/vue-calendar-bar",
+  "version": "2.21.0",
+  "description": "",
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "sideEffects": false,
+  "type": "module",
+  "dependencies": {
+    "@opentinyvue/vue-cascader-select": "~2.21.0",
+    "@opentinyvue/vue-common": "~2.21.0",
+    "@opentinyvue/vue-icon": "~2.21.0",
+    "@opentinyvue/vue-renderless": "~3.21.0"
+  },
+  "license": "MIT",
+  "types": "index.d.ts",
+  "scripts": {
+    "build": "pnpm -w build:ui $npm_package_name",
+    "//postversion": "pnpm build"
+  }
+}

package/src/calendar-item.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/src/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/src/mobile-first.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;