{"version":3,"file":"SnackBar-DdE1dYhi.mjs","names":[],"sources":["../src/components/misc/SnackBar.vue","../src/components/misc/SnackBar.vue"],"sourcesContent":["<template>\n  <div class=\"snack-bar-wrap\" :style=\"style.wrap\">\n    <template v-for=\"(msg, i) in msgs\" :key=\"i\">\n      <div class=\"snack-bar\" :style=\"style.bar(msg.color)\" @click=\"pop(i)\">\n        {{ msg.msg.message || msg.msg }}\n      </div>\n      <br />\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nconst getStyle = (\n  baseSize: string,\n  position: { pos: string; textAlign: string },\n) => {\n  const c = (f: number) => `calc(${f} * ${baseSize})`;\n  const { pos, textAlign } = position;\n  return {\n    wrap: {\n      position: \"fixed\",\n      left: 0,\n      pos: pos ?? c(0.05),\n      zIndex: 9999,\n      width: \"100%\",\n      padding: `0 ${c(0.2)}`,\n      pointerEvents: \"none\",\n      textAlign,\n    },\n    bar: (bg: string) => ({\n      display: \"inline-block\",\n      width: \"auto\",\n      minWidth: baseSize,\n      maxWidth: `calc(100vw - ${c(0.4)})`,\n      padding: `${c(0.15)} ${c(0.2)}`,\n      margin: `0 0 ${c(0.05)}`,\n      borderRadius: c(0.02),\n      lineHeight: c(0.2),\n      color: \"#fff\",\n      background: bg,\n      boxShadow: `0 ${c(0.01)} ${c(0.025)} rgba(0,0,0, .15)`,\n      cursor: \"pointer\",\n      textAlign: \"center\",\n      pointerEvents: \"all\",\n      userSelect: \"none\",\n    }),\n  };\n};\nimport { defineComponent } from \"vue\";\nexport default defineComponent({\n  name: \"SnackBar\",\n  props: {\n    colors: {\n      default: () => ({\n        open: \"#333\",\n        info: \"#3DBD7D\",\n        error: \"#FA7377\",\n        warn: \"#FF6600\",\n      }),\n      type: Object,\n    },\n    position: { default: \"top-center\", type: String },\n    holdTime: { default: 5000, type: Number },\n  },\n  data() {\n    return {\n      msgs: [] as Array<{\n        color: string;\n        msg: string;\n        timer: ReturnType<typeof setTimeout> | undefined;\n      }>,\n      baseSize: \"5rem\",\n    };\n  },\n  computed: {\n    $_position(): { pos: string; textAlign: string } {\n      const [p, textAlign] = this.position.toString().split(\"-\");\n      return {\n        pos: [\"top\", \"bottom\"].includes(p) ? p : \"top\",\n        textAlign: [\"left\", \"center\", \"right\"].includes(textAlign)\n          ? textAlign\n          : \"center\",\n      };\n    },\n    style(): {\n      wrap: {\n        position: string;\n        left: number;\n        pos: string;\n        zIndex: number;\n        width: string;\n        padding: string;\n        pointerEvents: string;\n        textAlign: string;\n      };\n      bar: (bg: string) => {\n        display: string;\n        width: string;\n        minWidth: string;\n        maxWidth: string;\n        padding: string;\n        margin: string;\n        borderRadius: string;\n        lineHeight: string;\n        color: string;\n        background: string;\n        boxShadow: string;\n        cursor: string;\n        textAlign: string;\n        pointerEvents: string;\n        userSelect: string;\n      };\n    } {\n      return getStyle(this.baseSize, this.$_position);\n    },\n  },\n  methods: {\n    info(msg: string): boolean {\n      const color = this.colors.info;\n      this.open({ color, msg }, false);\n      return true;\n    },\n    error(msg: string): boolean {\n      const color = this.colors.error;\n      this.open({ color, msg }, false);\n      return false;\n    },\n    warn(msg: string): boolean {\n      const color = this.colors.warn;\n      this.open({ color, msg }, false);\n      return true;\n    },\n    open(\n      message: { color: string; msg: string } | string,\n      isOpen = true,\n    ): boolean {\n      let msg;\n      let color;\n      if (!isOpen) {\n        color = (message as { color: string; msg: string }).color;\n        msg = (message as { color: string; msg: string }).msg;\n      } else {\n        color = this.colors.open;\n        msg = message as string;\n      }\n      const msgObj = {\n        color,\n        msg,\n        timer: setTimeout(this.pop, this.holdTime),\n      };\n\n      this.msgs.push(msgObj);\n\n      return true;\n    },\n    pop(i = 0): void {\n      if (this.msgs[i]) clearTimeout(this.msgs[i].timer as unknown as number);\n      this.msgs.splice(i, 1);\n    },\n  },\n});\n</script>\n<style lang=\"scss\">\n.octopus-app {\n  .snack-bar-wrap {\n    bottom: 0;\n  }\n}\n</style>\n","<template>\n  <div class=\"snack-bar-wrap\" :style=\"style.wrap\">\n    <template v-for=\"(msg, i) in msgs\" :key=\"i\">\n      <div class=\"snack-bar\" :style=\"style.bar(msg.color)\" @click=\"pop(i)\">\n        {{ msg.msg.message || msg.msg }}\n      </div>\n      <br />\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nconst getStyle = (\n  baseSize: string,\n  position: { pos: string; textAlign: string },\n) => {\n  const c = (f: number) => `calc(${f} * ${baseSize})`;\n  const { pos, textAlign } = position;\n  return {\n    wrap: {\n      position: \"fixed\",\n      left: 0,\n      pos: pos ?? c(0.05),\n      zIndex: 9999,\n      width: \"100%\",\n      padding: `0 ${c(0.2)}`,\n      pointerEvents: \"none\",\n      textAlign,\n    },\n    bar: (bg: string) => ({\n      display: \"inline-block\",\n      width: \"auto\",\n      minWidth: baseSize,\n      maxWidth: `calc(100vw - ${c(0.4)})`,\n      padding: `${c(0.15)} ${c(0.2)}`,\n      margin: `0 0 ${c(0.05)}`,\n      borderRadius: c(0.02),\n      lineHeight: c(0.2),\n      color: \"#fff\",\n      background: bg,\n      boxShadow: `0 ${c(0.01)} ${c(0.025)} rgba(0,0,0, .15)`,\n      cursor: \"pointer\",\n      textAlign: \"center\",\n      pointerEvents: \"all\",\n      userSelect: \"none\",\n    }),\n  };\n};\nimport { defineComponent } from \"vue\";\nexport default defineComponent({\n  name: \"SnackBar\",\n  props: {\n    colors: {\n      default: () => ({\n        open: \"#333\",\n        info: \"#3DBD7D\",\n        error: \"#FA7377\",\n        warn: \"#FF6600\",\n      }),\n      type: Object,\n    },\n    position: { default: \"top-center\", type: String },\n    holdTime: { default: 5000, type: Number },\n  },\n  data() {\n    return {\n      msgs: [] as Array<{\n        color: string;\n        msg: string;\n        timer: ReturnType<typeof setTimeout> | undefined;\n      }>,\n      baseSize: \"5rem\",\n    };\n  },\n  computed: {\n    $_position(): { pos: string; textAlign: string } {\n      const [p, textAlign] = this.position.toString().split(\"-\");\n      return {\n        pos: [\"top\", \"bottom\"].includes(p) ? p : \"top\",\n        textAlign: [\"left\", \"center\", \"right\"].includes(textAlign)\n          ? textAlign\n          : \"center\",\n      };\n    },\n    style(): {\n      wrap: {\n        position: string;\n        left: number;\n        pos: string;\n        zIndex: number;\n        width: string;\n        padding: string;\n        pointerEvents: string;\n        textAlign: string;\n      };\n      bar: (bg: string) => {\n        display: string;\n        width: string;\n        minWidth: string;\n        maxWidth: string;\n        padding: string;\n        margin: string;\n        borderRadius: string;\n        lineHeight: string;\n        color: string;\n        background: string;\n        boxShadow: string;\n        cursor: string;\n        textAlign: string;\n        pointerEvents: string;\n        userSelect: string;\n      };\n    } {\n      return getStyle(this.baseSize, this.$_position);\n    },\n  },\n  methods: {\n    info(msg: string): boolean {\n      const color = this.colors.info;\n      this.open({ color, msg }, false);\n      return true;\n    },\n    error(msg: string): boolean {\n      const color = this.colors.error;\n      this.open({ color, msg }, false);\n      return false;\n    },\n    warn(msg: string): boolean {\n      const color = this.colors.warn;\n      this.open({ color, msg }, false);\n      return true;\n    },\n    open(\n      message: { color: string; msg: string } | string,\n      isOpen = true,\n    ): boolean {\n      let msg;\n      let color;\n      if (!isOpen) {\n        color = (message as { color: string; msg: string }).color;\n        msg = (message as { color: string; msg: string }).msg;\n      } else {\n        color = this.colors.open;\n        msg = message as string;\n      }\n      const msgObj = {\n        color,\n        msg,\n        timer: setTimeout(this.pop, this.holdTime),\n      };\n\n      this.msgs.push(msgObj);\n\n      return true;\n    },\n    pop(i = 0): void {\n      if (this.msgs[i]) clearTimeout(this.msgs[i].timer as unknown as number);\n      this.msgs.splice(i, 1);\n    },\n  },\n});\n</script>\n<style lang=\"scss\">\n.octopus-app {\n  .snack-bar-wrap {\n    bottom: 0;\n  }\n}\n</style>\n"],"mappings":";;;;AAYA,IAAM,YACJ,UACA,aACG;CACH,MAAM,KAAK,MAAc,QAAQ,EAAC,KAAM,SAAS;CACjD,MAAM,EAAE,KAAK,cAAc;CAC3B,OAAO;EACL,MAAM;GACJ,UAAU;GACV,MAAM;GACN,KAAK,OAAO,EAAE,GAAI;GAClB,QAAQ;GACR,OAAO;GACP,SAAS,KAAK,EAAE,EAAG;GACnB,eAAe;GACf;EACF;EACA,MAAM,QAAgB;GACpB,SAAS;GACT,OAAO;GACP,UAAU;GACV,UAAU,gBAAgB,EAAE,EAAG,EAAE;GACjC,SAAS,GAAG,EAAE,GAAI,EAAC,GAAI,EAAE,EAAG;GAC5B,QAAQ,OAAO,EAAE,GAAI;GACrB,cAAc,EAAE,GAAI;GACpB,YAAY,EAAE,EAAG;GACjB,OAAO;GACP,YAAY;GACZ,WAAW,KAAK,EAAE,GAAI,EAAC,GAAI,EAAE,IAAK,EAAC;GACnC,QAAQ;GACR,WAAW;GACX,eAAe;GACf,YAAY;EACd;CACF;AACF;AAEA,IAAA,4CAAe,gBAAgB;CAC7B,MAAM;CACN,OAAO;EACL,QAAQ;GACN,gBAAgB;IACd,MAAM;IACN,MAAM;IACN,OAAO;IACP,MAAM;GACR;GACA,MAAM;EACR;EACA,UAAU;GAAE,SAAS;GAAc,MAAM;EAAO;EAChD,UAAU;GAAE,SAAS;GAAM,MAAM;EAAO;CAC1C;CACA,OAAO;EACL,OAAO;GACL,MAAM,CAAC;GAKP,UAAU;EACZ;CACF;CACA,UAAU;EACR,aAAiD;GAC/C,MAAM,CAAC,GAAG,aAAa,KAAK,SAAS,SAAS,EAAE,MAAM,GAAG;GACzD,OAAO;IACL,KAAK,CAAC,OAAO,QAAQ,EAAE,SAAS,CAAC,IAAI,IAAI;IACzC,WAAW;KAAC;KAAQ;KAAU;IAAO,EAAE,SAAS,SAAS,IACrD,YACA;GACN;EACF;EACA,QA4BE;GACA,OAAO,SAAS,KAAK,UAAU,KAAK,UAAU;EAChD;CACF;CACA,SAAS;EACP,KAAK,KAAsB;GACzB,MAAM,QAAQ,KAAK,OAAO;GAC1B,KAAK,KAAK;IAAE;IAAO;GAAI,GAAG,KAAK;GAC/B,OAAO;EACT;EACA,MAAM,KAAsB;GAC1B,MAAM,QAAQ,KAAK,OAAO;GAC1B,KAAK,KAAK;IAAE;IAAO;GAAI,GAAG,KAAK;GAC/B,OAAO;EACT;EACA,KAAK,KAAsB;GACzB,MAAM,QAAQ,KAAK,OAAO;GAC1B,KAAK,KAAK;IAAE;IAAO;GAAI,GAAG,KAAK;GAC/B,OAAO;EACT;EACA,KACE,SACA,SAAS,MACA;GACT,IAAI;GACJ,IAAI;GACJ,IAAI,CAAC,QAAQ;IACX,QAAS,QAA2C;IACpD,MAAO,QAA2C;GACpD,OAAO;IACL,QAAQ,KAAK,OAAO;IACpB,MAAM;GACR;GACA,MAAM,SAAS;IACb;IACA;IACA,OAAO,WAAW,KAAK,KAAK,KAAK,QAAQ;GAC3C;GAEA,KAAK,KAAK,KAAK,MAAM;GAErB,OAAO;EACT;EACA,IAAI,IAAI,GAAS;GACf,IAAI,KAAK,KAAK,IAAI,aAAa,KAAK,KAAK,GAAG,KAA0B;GACtE,KAAK,KAAK,OAAO,GAAG,CAAC;EACvB;CACF;AACF,CAAC;;;;;;qBC/JC,mBAOM,OAAA;EAPD,OAAM;EAAkB,OAAK,eAAE,KAAA,MAAM,IAAI;uBAC5C,mBAKW,UAAA,MAAA,WALkB,KAAA,OAAX,KAAK,MAAC;0DAAiB,EAAC,GAAA,CACxC,mBAEM,OAAA;GAFD,OAAM;GAAa,OAAK,eAAE,KAAA,MAAM,IAAI,IAAI,KAAK,CAAA;GAAI,UAAK,WAAE,KAAA,IAAI,CAAC;qBAC7D,IAAI,IAAI,WAAW,IAAI,GAAG,GAAA,IAAA,UAAA,GAAA,OAAA,OAAA,OAAA,KAE/B,mBAAM,MAAA,MAAA,MAAA,EAAA,EAAA,GAAA,EAAA"}