@vespera-ui/vue 0.4.0 → 0.5.0

package/dist/index.d.cts

@@ -1048,5 +1048,116 @@ declare const StatCard: vue.DefineComponent<vue.ExtractPropTypes<{
     spark: number[];
     sparkColor: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const NumberStepper: vue.DefineComponent<vue.ExtractPropTypes<{
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    min: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    max: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    unit: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    min: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    max: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    unit: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    modelValue: number;
+    min: number;
+    max: number;
+    step: number;
+    unit: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const CopyButton: vue.DefineComponent<vue.ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: PropType<"sm">;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: PropType<"sm">;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    size: "sm";
+    label: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const InlineEdit: vue.DefineComponent<vue.ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "save"[], "save", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onSave?: ((...args: any[]) => any) | undefined;
+}>, {
+    value: string;
+    placeholder: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
-export { Accordion, type AccordionItem, Alert, type AlertTone, Avatar, AvatarGroup, Badge, type BadgeTone, Banner, Breadcrumb, Button, type ButtonVariant, Card, CardHead, Checkbox, CircularProgress, DescriptionList, Divider, Donut, type DonutDatum, EmptyState, Field, IconButton, Input, Kbd, NativeSelect, Pagination, type Person, Progress, Radio, RadioGroup, Segmented, type SelectOption, Skeleton, Slider, Sparkline, Spinner, Stat, StatCard, Stepper, Switch, type TabItem, Tabs, Tag, Textarea, Timeline, type TimelineItem, smoothPath };
+export { Accordion, type AccordionItem, Alert, type AlertTone, Avatar, AvatarGroup, Badge, type BadgeTone, Banner, Breadcrumb, Button, type ButtonVariant, Card, CardHead, Checkbox, CircularProgress, CopyButton, DescriptionList, Divider, Donut, type DonutDatum, EmptyState, Field, IconButton, InlineEdit, Input, Kbd, NativeSelect, NumberStepper, Pagination, type Person, Progress, Radio, RadioGroup, Segmented, type SelectOption, Skeleton, Slider, Sparkline, Spinner, Stat, StatCard, Stepper, Switch, type TabItem, Tabs, Tag, Textarea, Timeline, type TimelineItem, smoothPath };

package/dist/index.d.ts

@@ -1048,5 +1048,116 @@ declare const StatCard: vue.DefineComponent<vue.ExtractPropTypes<{
     spark: number[];
     sparkColor: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const NumberStepper: vue.DefineComponent<vue.ExtractPropTypes<{
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    min: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    max: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    unit: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    min: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    max: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    unit: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    modelValue: number;
+    min: number;
+    max: number;
+    step: number;
+    unit: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const CopyButton: vue.DefineComponent<vue.ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: PropType<"sm">;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: PropType<"sm">;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    size: "sm";
+    label: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const InlineEdit: vue.DefineComponent<vue.ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "save"[], "save", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onSave?: ((...args: any[]) => any) | undefined;
+}>, {
+    value: string;
+    placeholder: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
-export { Accordion, type AccordionItem, Alert, type AlertTone, Avatar, AvatarGroup, Badge, type BadgeTone, Banner, Breadcrumb, Button, type ButtonVariant, Card, CardHead, Checkbox, CircularProgress, DescriptionList, Divider, Donut, type DonutDatum, EmptyState, Field, IconButton, Input, Kbd, NativeSelect, Pagination, type Person, Progress, Radio, RadioGroup, Segmented, type SelectOption, Skeleton, Slider, Sparkline, Spinner, Stat, StatCard, Stepper, Switch, type TabItem, Tabs, Tag, Textarea, Timeline, type TimelineItem, smoothPath };
+export { Accordion, type AccordionItem, Alert, type AlertTone, Avatar, AvatarGroup, Badge, type BadgeTone, Banner, Breadcrumb, Button, type ButtonVariant, Card, CardHead, Checkbox, CircularProgress, CopyButton, DescriptionList, Divider, Donut, type DonutDatum, EmptyState, Field, IconButton, InlineEdit, Input, Kbd, NativeSelect, NumberStepper, Pagination, type Person, Progress, Radio, RadioGroup, Segmented, type SelectOption, Skeleton, Slider, Sparkline, Spinner, Stat, StatCard, Stepper, Switch, type TabItem, Tabs, Tag, Textarea, Timeline, type TimelineItem, smoothPath };

package/dist/index.js

@@ -1208,6 +1208,137 @@ var StatCard = defineComponent({
     );
   }
 });
+var ICON_CHECK = "M20 6L9 17l-5-5";
+var ICON_DOC = "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8zM14 2v6h6";
+var ICON_PENCIL = "M12 20h9M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4z";
+var NumberStepper = defineComponent({
+  name: "VspNumberStepper",
+  props: {
+    modelValue: { type: Number, default: 0 },
+    min: { type: Number, default: void 0 },
+    max: { type: Number, default: void 0 },
+    step: { type: Number, default: 1 },
+    unit: { type: String, default: void 0 }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const set = (v) => {
+      let n = v;
+      if (props.min != null && n < props.min) n = props.min;
+      if (props.max != null && n > props.max) n = props.max;
+      emit("update:modelValue", n);
+    };
+    return () => h("div", { class: "ui-stepper" }, [
+      h(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Decrease",
+          disabled: props.min != null && props.modelValue <= props.min,
+          onClick: () => set(props.modelValue - props.step)
+        },
+        "\u2212"
+      ),
+      h("span", { class: "val" }, [
+        props.modelValue,
+        props.unit ? h("i", null, props.unit) : null
+      ]),
+      h(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Increase",
+          disabled: props.max != null && props.modelValue >= props.max,
+          onClick: () => set(props.modelValue + props.step)
+        },
+        "+"
+      )
+    ]);
+  }
+});
+var CopyButton = defineComponent({
+  name: "VspCopyButton",
+  props: {
+    text: { type: String, required: true },
+    label: { type: String, default: "Copy" },
+    size: { type: String, default: "sm" }
+  },
+  setup(props) {
+    const done = ref(false);
+    const copy = async () => {
+      try {
+        await navigator.clipboard?.writeText(props.text);
+      } catch {
+      }
+      done.value = true;
+      setTimeout(() => done.value = false, 1400);
+    };
+    return () => h(
+      "button",
+      {
+        type: "button",
+        class: cx("btn", "btn-ghost", props.size === "sm" && "btn-sm"),
+        onClick: copy
+      },
+      [
+        done.value ? h("span", { style: { color: "var(--success)", display: "inline-flex" } }, [
+          svgIcon(ICON_CHECK, 15)
+        ]) : svgIcon(ICON_DOC, 15),
+        done.value ? "Copied" : props.label
+      ]
+    );
+  }
+});
+var InlineEdit = defineComponent({
+  name: "VspInlineEdit",
+  props: {
+    value: { type: String, default: "" },
+    placeholder: { type: String, default: "Empty" }
+  },
+  emits: ["save"],
+  setup(props, { emit }) {
+    const editing = ref(false);
+    const draft = ref(props.value);
+    const commit = () => {
+      editing.value = false;
+      if (draft.value !== props.value) emit("save", draft.value);
+    };
+    return () => editing.value ? h("input", {
+      class: "ui-input",
+      value: draft.value,
+      style: { height: "32px", maxWidth: "240px" },
+      onVnodeMounted: (vn) => vn.el?.focus(),
+      onInput: (e) => draft.value = e.target.value,
+      onBlur: commit,
+      onKeydown: (e) => {
+        if (e.key === "Enter") commit();
+        if (e.key === "Escape") {
+          draft.value = props.value;
+          editing.value = false;
+        }
+      }
+    }) : h(
+      "span",
+      {
+        class: "ui-inline",
+        onClick: () => {
+          draft.value = props.value;
+          editing.value = true;
+        }
+      },
+      [
+        h(
+          "span",
+          { style: { color: props.value ? "var(--text)" : "var(--text-faint)" } },
+          props.value || props.placeholder
+        ),
+        h("span", { class: "pen", style: { display: "inline-flex" } }, [
+          svgIcon(ICON_PENCIL, 14)
+        ])
+      ]
+    );
+  }
+});
 export {
   Accordion,
   Alert,
@@ -1221,15 +1352,18 @@ export {
   CardHead,
   Checkbox,
   CircularProgress,
+  CopyButton,
   DescriptionList,
   Divider,
   Donut,
   EmptyState,
   Field,
   IconButton,
+  InlineEdit,
   Input,
   Kbd,
   NativeSelect,
+  NumberStepper,
   Pagination,
   Progress,
   Radio,