@elmethis/core 1.0.0-alpha.16 → 1.0.0-alpha.161

package/dist/components/form/ElmButton.vue2.mjs

@@ -0,0 +1,57 @@
+import { defineComponent, createElementBlock, openBlock, normalizeStyle, normalizeClass, createVNode, Transition, withCtx, createBlock, renderSlot } from "vue";
+import ElmDotLoadingIcon from "../icon/ElmDotLoadingIcon.vue.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmButton",
+  props: {
+    loading: { type: Boolean, default: false },
+    block: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    primary: { type: Boolean, default: false },
+    onClick: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const handleClick = () => {
+      if (!props.loading && !props.disabled && props.onClick) {
+        props.onClick();
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", {
+        class: normalizeClass([
+          _ctx.$style.button,
+          {
+            [_ctx.$style.enable]: !_ctx.loading && !_ctx.disabled,
+            [_ctx.$style.normal]: !_ctx.primary,
+            [_ctx.$style.primary]: _ctx.primary
+          }
+        ]),
+        style: normalizeStyle({
+          display: _ctx.block ? "flex" : "inline-flex",
+          width: _ctx.block ? "100%" : "auto",
+          cursor: _ctx.disabled ? "not-allowed" : _ctx.loading ? "progress" : "pointer",
+          "--opacity": _ctx.disabled ? 0.6 : void 0
+        }),
+        onClick: handleClick
+      }, [
+        createVNode(Transition, { mode: "out-in" }, {
+          default: withCtx(() => [
+            _ctx.loading ? (openBlock(), createBlock(ElmDotLoadingIcon, {
+              key: 0,
+              size: "1.5rem"
+            })) : (openBlock(), createElementBlock("span", {
+              key: 1,
+              class: normalizeClass(_ctx.$style.flex)
+            }, [
+              renderSlot(_ctx.$slots, "default", {}, void 0, true)
+            ], 2))
+          ]),
+          _: 3
+        })
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/form/ElmButton.vue3.mjs

@@ -0,0 +1,20 @@
+const button = "_button_16put_1";
+const normal = "_normal_16put_16";
+const primary = "_primary_16put_27";
+const enable = "_enable_16put_38";
+const flex = "_flex_16put_58";
+const style0 = {
+  button,
+  normal,
+  primary,
+  enable,
+  flex
+};
+export {
+  button,
+  style0 as default,
+  enable,
+  flex,
+  normal,
+  primary
+};

package/dist/components/form/ElmButton2.css

@@ -0,0 +1,65 @@
+._button_16put_1 {
+  all: unset;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+  padding: 0.5rem 1.5rem;
+  line-height: 1.5rem;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  cursor: pointer;
+  transition: opacity 200ms, transform 200ms;
+  opacity: var(--opacity);
+}
+._normal_16put_16 {
+  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.2);
+  color: rgba(0, 0, 0, 0.6);
+  background-color: rgba(255, 255, 255, 0.8);
+}
+[data-theme=dark] ._normal_16put_16 {
+  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.6);
+  color: rgba(255, 255, 255, 0.6);
+  background-color: rgba(255, 255, 255, 0.1);
+}
+._primary_16put_27 {
+  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.2);
+  color: rgba(255, 255, 255, 0.6);
+  background-color: rgba(0, 0, 0, 0.8);
+}
+[data-theme=dark] ._primary_16put_27 {
+  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.6);
+  color: rgba(0, 0, 0, 0.6);
+  background-color: rgba(255, 255, 255, 0.8);
+}
+._enable_16put_38 {
+  transition: opacity 200ms, transform 200ms;
+}
+[data-theme=dark] ._enable_16put_38:hover {
+  transform: translateX(-1px) translateY(-1px);
+  opacity: 0.7;
+  opacity: var(--opacity, 0.7);
+}
+[data-theme=dark] ._enable_16put_38:active {
+  transform: translateX(1px) translateY(1px);
+  opacity: 0.5;
+  opacity: var(--opacity, 0.5);
+}
+._enable_16put_38:hover {
+  transform: translateX(-1px) translateY(-1px);
+  opacity: 0.7;
+  opacity: var(--opacity, 0.7);
+}
+._enable_16put_38:active {
+  transform: translateX(1px) translateY(1px);
+  opacity: 0.5;
+  opacity: var(--opacity, 0.5);
+}
+._flex_16put_58 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+}

package/dist/components/form/ElmCheckbox.css

@@ -0,0 +1,67 @@
+._container_101ok_1 {
+  width: -moz-fit-content;
+  width: fit-content;
+  font-family: sans-serif;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  cursor: pointer;
+  transition: opacity 200ms;
+}
+._container_101ok_1:hover {
+  opacity: 0.8;
+}
+._container--disable_101ok_11 {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+._container--disable_101ok_11:hover {
+  opacity: 0.45;
+}
+._checkbox_101ok_19 {
+  stroke: rgba(0, 0, 0, 0.8);
+  fill: transparent;
+}
+[data-theme=dark] ._checkbox_101ok_19 {
+  stroke: rgba(255, 255, 255, 0.8);
+}
+._rect_101ok_27 {
+  transition: all 0.2s;
+}
+._rect--loading_101ok_30 {
+  opacity: 0.3;
+}
+._rect--checked_101ok_33 {
+  fill: rgba(0, 0, 0, 0.8);
+}
+[data-theme=dark] ._rect--checked_101ok_33 {
+  fill: rgba(255, 255, 255, 0.8);
+}
+._loading_101ok_40 {
+  transition: opacity 200ms;
+  fill: rgba(0, 0, 0, 0.7);
+}
+[data-theme=dark] ._loading_101ok_40 {
+  fill: rgba(255, 255, 255, 0.7);
+}
+@keyframes _elmethis-checkbox-check-line_101ok_1 {
+0% {
+    stroke-dashoffset: 100%;
+}
+100% {
+    stroke-dashoffset: 0%;
+}
+}
+._check-line_101ok_56 {
+  stroke-dasharray: 100%;
+  animation-name: _elmethis-checkbox-check-line_101ok_1;
+  animation-duration: 0.2s;
+  animation-timing-function: ease-in-out;
+  animation-delay: 0.1s;
+  animation-fill-mode: both;
+  transform-origin: center;
+  stroke: rgba(255, 255, 255, 0.9);
+}
+[data-theme=dark] ._check-line_101ok_56 {
+  stroke: rgba(0, 0, 0, 0.9);
+}

package/dist/components/form/ElmCheckbox.vue.d.ts

@@ -3,14 +3,24 @@ export interface ElmCheckboxProps {
      * The label displayed.
      */
     label: string;
+    /**
+     * Whether the checkbox is in a loading state.
+     */
+    loading?: boolean;
+    /**
+     * Whether the checkbox is disabled.
+     */
+    disable?: boolean;
 }
-declare let __VLS_typeProps: ElmCheckboxProps;
+type __VLS_Props = ElmCheckboxProps;
 type __VLS_PublicProps = {
-    'isChecked'?: boolean;
-} & typeof __VLS_typeProps;
+    modelValue?: boolean;
+} & __VLS_Props;
 declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:isChecked": (isChecked: boolean) => any;
+    "update:modelValue": (value: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:isChecked"?: ((isChecked: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    loading: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/dist/components/form/ElmCheckbox.vue.mjs

@@ -0,0 +1,10 @@
+import _sfc_main from "./ElmCheckbox.vue2.mjs";
+import style0 from "./ElmCheckbox.vue3.mjs";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const cssModules = {
+  "$style": style0
+};
+const ElmCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  ElmCheckbox as default
+};

package/dist/components/form/ElmCheckbox.vue2.mjs

@@ -0,0 +1,177 @@
+import { defineComponent, mergeModels, useModel, createElementBlock, openBlock, normalizeClass, createElementVNode, createVNode, createCommentVNode, normalizeStyle } from "vue";
+import ElmInlineText from "../inline/ElmInlineText.vue.mjs";
+const _hoisted_1 = { style: {
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem"
+} };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmCheckbox",
+  props: /* @__PURE__ */ mergeModels({
+    label: {},
+    loading: { type: Boolean, default: false },
+    disable: { type: Boolean }
+  }, {
+    "modelValue": { type: Boolean, ...{} },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const isChecked = useModel(__props, "modelValue");
+    function toggleCheck() {
+      if (!props.loading && !props.disable) {
+        isChecked.value = !isChecked.value;
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          _ctx.$style.container,
+          {
+            [_ctx.$style["container--disable"]]: props.disable
+          }
+        ]),
+        onClick: toggleCheck
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          (openBlock(), createElementBlock("svg", {
+            width: "24",
+            height: "24",
+            class: normalizeClass(_ctx.$style.checkbox)
+          }, [
+            createElementVNode("circle", {
+              cx: "0",
+              cy: "0",
+              r: "2",
+              class: normalizeClass(_ctx.$style.loading),
+              style: normalizeStyle({ opacity: props.loading ? 1 : 0 })
+            }, _cache[0] || (_cache[0] = [
+              createElementVNode("animate", {
+                attributeName: "cx",
+                values: "4; 20; 20; 4; 4",
+                dur: "1.2s",
+                repeatCount: "indefinite",
+                keySplines: "0.25 0.1 0.25 1; 0.42 0 0.58 1; 0.25 0.1 0.25 1; 0.42 0 0.58 1",
+                calcMode: "spline"
+              }, null, -1),
+              createElementVNode("animate", {
+                attributeName: "cy",
+                values: "4; 4; 20; 20; 4",
+                dur: "1.2s",
+                repeatCount: "indefinite",
+                keySplines: "0.25 0.1 0.25 1; 0.42 0 0.58 1; 0.25 0.1 0.25 1; 0.42 0 0.58 1",
+                calcMode: "spline"
+              }, null, -1)
+            ]), 6),
+            createElementVNode("circle", {
+              cx: "20",
+              cy: "20",
+              r: "2",
+              class: normalizeClass(_ctx.$style.loading),
+              style: normalizeStyle({ opacity: props.loading ? 1 : 0 })
+            }, _cache[1] || (_cache[1] = [
+              createElementVNode("animate", {
+                attributeName: "cx",
+                values: "20; 4; 4; 20; 20",
+                dur: "1.2s",
+                repeatCount: "indefinite",
+                keySplines: "0.25 0.1 0.25 1; 0.42 0 0.58 1; 0.25 0.1 0.25 1; 0.42 0 0.58 1",
+                calcMode: "spline"
+              }, null, -1),
+              createElementVNode("animate", {
+                attributeName: "cy",
+                values: "20; 20; 4; 4; 20",
+                dur: "1.2s",
+                repeatCount: "indefinite",
+                keySplines: "0.25 0.1 0.25 1; 0.42 0 0.58 1; 0.25 0.1 0.25 1; 0.42 0 0.58 1",
+                calcMode: "spline"
+              }, null, -1)
+            ]), 6),
+            createElementVNode("rect", {
+              x: "4",
+              y: "4",
+              width: "16",
+              height: "16",
+              class: normalizeClass([
+                _ctx.$style.rect,
+                {
+                  [_ctx.$style["rect--checked"]]: isChecked.value,
+                  [_ctx.$style["rect--loading"]]: props.loading
+                }
+              ]),
+              strokeWidth: "0.8"
+            }, null, 2),
+            isChecked.value ? (openBlock(), createElementBlock("polyline", {
+              key: 0,
+              class: normalizeClass(_ctx.$style["check-line"]),
+              points: "5,12 10,17 19,8",
+              strokeWidth: "1.5",
+              fill: "transparent"
+            }, null, 2)) : createCommentVNode("", true),
+            _cache[2] || (_cache[2] = createElementVNode("line", {
+              x1: "0",
+              y1: "1",
+              x2: "4",
+              y2: "1",
+              strokeWidth: "2",
+              fill: "transparent"
+            }, null, -1)),
+            _cache[3] || (_cache[3] = createElementVNode("line", {
+              x1: "4",
+              y1: "0",
+              x2: "24",
+              y2: "0",
+              strokeWidth: "1",
+              fill: "transparent"
+            }, null, -1)),
+            _cache[4] || (_cache[4] = createElementVNode("line", {
+              x1: "0",
+              y1: "4",
+              x2: "0",
+              y2: "16",
+              strokeWidth: "1",
+              fill: "transparent"
+            }, null, -1)),
+            _cache[5] || (_cache[5] = createElementVNode("line", {
+              x1: "0",
+              y1: "18",
+              x2: "0",
+              y2: "20",
+              strokeWidth: "1",
+              fill: "transparent"
+            }, null, -1)),
+            _cache[6] || (_cache[6] = createElementVNode("line", {
+              x1: "0",
+              y1: "24",
+              x2: "20",
+              y2: "24",
+              strokeWidth: "1",
+              fill: "transparent"
+            }, null, -1)),
+            _cache[7] || (_cache[7] = createElementVNode("line", {
+              x1: "20",
+              y1: "23",
+              x2: "24",
+              y2: "23",
+              strokeWidth: "1.5",
+              fill: "transparent"
+            }, null, -1)),
+            _cache[8] || (_cache[8] = createElementVNode("line", {
+              x1: "24",
+              y1: "4",
+              x2: "24",
+              y2: "20",
+              style: { strokeWidth: 1 },
+              fill: "transparent"
+            }, null, -1))
+          ], 2)),
+          createVNode(ElmInlineText, { text: _ctx.label }, null, 8, ["text"])
+        ])
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/form/ElmCheckbox.vue3.mjs

@@ -0,0 +1,22 @@
+const container = "_container_101ok_1";
+const checkbox = "_checkbox_101ok_19";
+const rect = "_rect_101ok_27";
+const loading = "_loading_101ok_40";
+const style0 = {
+  container,
+  "container--disable": "_container--disable_101ok_11",
+  checkbox,
+  rect,
+  "rect--loading": "_rect--loading_101ok_30",
+  "rect--checked": "_rect--checked_101ok_33",
+  loading,
+  "check-line": "_check-line_101ok_56",
+  "elmethis-checkbox-check-line": "_elmethis-checkbox-check-line_101ok_1"
+};
+export {
+  checkbox,
+  container,
+  style0 as default,
+  loading,
+  rect
+};

package/dist/components/form/ElmSwitch.css

@@ -0,0 +1,42 @@
+._switch_y5v18_1 {
+  display: none;
+}
+._bar_y5v18_5 {
+  z-index: 0;
+  padding: var(--padding);
+  width: var(--width);
+  height: var(--size);
+  border-radius: calc((var(--size) + var(--padding)) / 2);
+  position: relative;
+  cursor: pointer;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
+  transition: opacity 300ms, background-color 300ms;
+  background-color: rgba(128, 128, 128, 0.25);
+}
+._bar--checked_y5v18_17 {
+  background-color: var(--color);
+}
+._bar--disabled_y5v18_20 {
+  cursor: not-allowed;
+}
+._circle_y5v18_24 {
+  z-index: 1;
+  width: var(--size);
+  height: var(--size);
+  border-radius: 50%;
+  position: absolute;
+  top: var(--padding);
+  left: var(--padding);
+  transition: transform 300ms, opacity 300ms, background-color 300ms;
+  background-color: rgba(255, 255, 255, 0.9);
+}
+._circle--checked_y5v18_35 {
+  transform: translateX(calc(var(--width) - var(--size)));
+}
+._circle--disabled_y5v18_38 {
+  opacity: 0.5;
+  background-color: gray;
+}
+._circle_y5v18_24:hover {
+  opacity: 0.8;
+}

package/dist/components/form/ElmSwitch.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import { default as ElmSwitch } from './ElmSwitch.vue';
+declare const meta: Meta<typeof ElmSwitch>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/form/ElmSwitch.vue.d.ts

@@ -0,0 +1,32 @@
+import { Property } from 'csstype';
+export interface ElmSwitchProps {
+    /**
+     * The color of the switch when checked.
+     */
+    color: string;
+    /**
+     * The size of the switch.
+     */
+    size: Property.Width;
+    /**
+     * Whether the switch is disabled.
+     */
+    disabled?: boolean;
+}
+type __VLS_Props = ElmSwitchProps;
+declare const __VLS_defaults: {
+    modelValue: boolean;
+};
+type __VLS_PublicProps = {
+    modelValue?: typeof __VLS_defaults['modelValue'];
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    color: string;
+    size: Property.Width;
+    disabled: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/form/ElmSwitch.vue.mjs

@@ -0,0 +1,10 @@
+import _sfc_main from "./ElmSwitch.vue2.mjs";
+import style0 from "./ElmSwitch.vue3.mjs";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const cssModules = {
+  "$style": style0
+};
+const ElmSwitch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  ElmSwitch as default
+};

package/dist/components/form/ElmSwitch.vue2.mjs

@@ -0,0 +1,61 @@
+import { defineComponent, mergeModels, useModel, createElementBlock, openBlock, normalizeStyle, createElementVNode, normalizeClass } from "vue";
+const _hoisted_1 = ["checked", "disabled"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmSwitch",
+  props: /* @__PURE__ */ mergeModels({
+    color: { default: "#6987b8" },
+    size: { default: "18px" },
+    disabled: { type: Boolean, default: false }
+  }, {
+    "modelValue": { default: false },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const checked = useModel(__props, "modelValue");
+    const handleClick = () => {
+      if (!props.disabled) checked.value = !checked.value;
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        onClick: handleClick,
+        style: normalizeStyle({
+          "--color": _ctx.color,
+          "--padding": "2px",
+          "--size": _ctx.size,
+          "--width": "calc(var(--size) * 2 + var(--padding) * 2)"
+        })
+      }, [
+        createElementVNode("input", {
+          class: normalizeClass([_ctx.$style.switch]),
+          type: "checkbox",
+          checked: checked.value,
+          disabled: _ctx.disabled
+        }, null, 10, _hoisted_1),
+        createElementVNode("div", {
+          class: normalizeClass([
+            _ctx.$style.bar,
+            {
+              [_ctx.$style["bar--checked"]]: checked.value,
+              [_ctx.$style["bar--disabled"]]: _ctx.disabled
+            }
+          ])
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass([
+              _ctx.$style.circle,
+              {
+                [_ctx.$style["circle--checked"]]: checked.value,
+                [_ctx.$style["circle--disabled"]]: _ctx.disabled
+              }
+            ])
+          }, null, 2)
+        ], 2)
+      ], 4);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/form/ElmSwitch.vue3.mjs

@@ -0,0 +1,16 @@
+const bar = "_bar_y5v18_5";
+const circle = "_circle_y5v18_24";
+const style0 = {
+  "switch": "_switch_y5v18_1",
+  bar,
+  "bar--checked": "_bar--checked_y5v18_17",
+  "bar--disabled": "_bar--disabled_y5v18_20",
+  circle,
+  "circle--checked": "_circle--checked_y5v18_35",
+  "circle--disabled": "_circle--disabled_y5v18_38"
+};
+export {
+  bar,
+  circle,
+  style0 as default
+};