fluency-v8-components 1.3.5 → 1.3.7

package/src/assets/prism-theme.css

@@ -0,0 +1,290 @@
+pre[class*="language-"],
+code[class*="language-"] {
+	color: #d4d4d4;
+	font-size: 13px;
+	text-shadow: none;
+	font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	line-height: 1.5;
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*="language-"]::selection,
+code[class*="language-"]::selection,
+pre[class*="language-"] *::selection,
+code[class*="language-"] *::selection {
+	text-shadow: none;
+	background: #264F78;
+}
+
+@media print {
+	pre[class*="language-"],
+	code[class*="language-"] {
+		text-shadow: none;
+	}
+}
+
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+	background: #1e1e1e;
+}
+
+:not(pre) > code[class*="language-"] {
+	padding: .1em .3em;
+	border-radius: .3em;
+	color: #db4c69;
+	background: #1e1e1e;
+}
+/*********************************************************
+* Tokens
+*/
+.namespace {
+	opacity: .7;
+}
+
+.token.doctype .token.doctype-tag {
+	color: #569CD6;
+}
+
+.token.doctype .token.name {
+	color: #9cdcfe;
+}
+
+.token.comment,
+.token.prolog {
+	color: #6a9955;
+}
+
+.token.timestamp {
+	color: #6a9955;
+}
+
+.token.errors {
+	color: #C10015;
+}
+
+.token.punctuation,
+.language-html .language-css,
+.language-html .language-javascript {
+	color: #FDBE23;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.inserted,
+.token.unit {
+	color: #b5cea8;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.deleted {
+	color: #ce9178;
+}
+
+.language-css .token.string.url {
+	text-decoration: underline;
+}
+
+.token.operator,
+.token.entity {
+	color: #d4d4d4;
+}
+
+.token.operator.arrow {
+	color: #569CD6;
+}
+
+.token.atrule {
+	color: #ce9178;
+}
+
+.token.atrule .token.rule {
+	color: #c586c0;
+}
+
+.token.atrule .token.url {
+	color: #9cdcfe;
+}
+
+.token.atrule .token.url .token.function {
+	color: #dcdcaa;
+}
+
+.token.atrule .token.url .token.punctuation {
+	color: #d4d4d4;
+}
+
+.token.keyword.module,
+.token.keyword.control-flow {
+	color: #c586c0;
+}
+
+.token.function,
+.token.function .token.maybe-class-name,
+.token.brackets {
+	color: #E9D299;
+}
+
+.token.builtinfunction,
+.token.builtinfunction {
+	color: #CE92D8;
+}
+
+.token.keyword,
+.token.curlybraces {
+	color: #569CD6;
+}
+
+.token.regex {
+	color: #d16969;
+}
+
+.token.important {
+	color: #569cd6;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.constant {
+	color: #9cdcfe;
+}
+
+.token.class-name,
+.token.maybe-class-name {
+	color: #4ec9b0;
+}
+
+.token.console {
+	color: #9cdcfe;
+}
+
+.token.parameter {
+	color: #9cdcfe;
+}
+
+.token.interpolation {
+	color: #9cdcfe;
+}
+
+.token.punctuation.interpolation-punctuation {
+	color: #569cd6;
+}
+
+.token.boolean {
+	color: #569cd6;
+}
+
+.token.property,
+.token.variable,
+.token.imports .token.maybe-class-name,
+.token.exports .token.maybe-class-name {
+	color: #9cdcfe;
+}
+
+.token.selector {
+	color: #d7ba7d;
+}
+
+.token.escape {
+	color: #d7ba7d;
+}
+
+.token.tag {
+	color: #569cd6;
+}
+
+.token.tag .token.punctuation {
+	color: #808080;
+}
+
+.token.cdata {
+	color: #808080;
+}
+
+.token.attr-name {
+	color: #9cdcfe;
+}
+
+.token.attr-value,
+.token.attr-value .token.punctuation {
+	color: #ce9178;
+}
+
+.token.attr-value .token.punctuation.attr-equals {
+	color: #d4d4d4;
+}
+
+.token.entity {
+	color: #569cd6;
+}
+
+.token.namespace {
+	color: #4ec9b0;
+}
+/*********************************************************
+* Language Specific
+*/
+
+pre[class*="language-javascript"],
+code[class*="language-javascript"],
+pre[class*="language-jsx"],
+code[class*="language-jsx"],
+pre[class*="language-typescript"],
+code[class*="language-typescript"],
+pre[class*="language-tsx"],
+code[class*="language-tsx"] {
+	color: #9cdcfe;
+}
+
+pre[class*="language-css"],
+code[class*="language-css"] {
+	color: #ce9178;
+}
+
+pre[class*="language-html"],
+code[class*="language-html"] {
+	color: #d4d4d4;
+}
+
+.language-regex .token.anchor {
+	color: #dcdcaa;
+}
+
+.language-html .token.punctuation {
+	color: #808080;
+}
+/*********************************************************
+* Line highlighting
+*/
+pre[class*="language-"] > code[class*="language-"] {
+	position: relative;
+	z-index: 1;
+}
+
+.line-highlight.line-highlight {
+	background: #f7ebc6;
+	box-shadow: inset 5px 0 0 #f7d87c;
+	z-index: 0;
+}

package/src/components/buttons/ActionButtons.vue

@@ -0,0 +1,374 @@
+<template>
+  <span class="relative isolate inline-flex rounded-md shadow-xs">
+    <button
+      v-if="props.add"
+      type="button"
+      :class="[
+        'action-btn std-blue rounded-l-md',
+        {
+          'rounded-r-md':
+            !props.config &&
+            !props.view &&
+            !props.edit &&
+            !props.delete &&
+            !props.schedule &&
+            !props.download &&
+            !props.play &&
+            !props.refresh &&
+            !props.stop,
+        },
+      ]"
+      @click.stop="$emit('add')"
+      @mouseover="toggleTooltip(true, addTooltip)"
+      @mouseout="toggleTooltip(false)"
+    >
+      <span class="sr-only">Add</span>
+      <PlusIcon class="icon" aria-hidden="true" />
+    </button>
+    <button
+      v-if="props.view"
+      type="button"
+      :class="[
+        'action-btn std-blue',
+        {
+          'rounded-l-md': !props.add,
+        },
+        {
+          'rounded-r-md':
+            !props.config &&
+            !props.edit &&
+            !props.delete &&
+            !props.schedule &&
+            !props.download &&
+            !props.play &&
+            !props.refresh &&
+            !props.stop,
+        },
+      ]"
+      @click.stop="$emit('view')"
+      @mouseover="toggleTooltip(true, viewTooltip)"
+      @mouseout="toggleTooltip(false)"
+    >
+      <EyeIcon class="icon" aria-hidden="true" />
+    </button>
+    <button
+      v-if="props.edit"
+      type="button"
+      :class="[
+        'action-btn std-blue',
+        {
+          'rounded-l-md': !props.add && !props.view,
+        },
+        {
+          'rounded-r-md':
+            !props.config &&
+            !props.delete &&
+            !props.schedule &&
+            !props.download &&
+            !props.play &&
+            !props.refresh &&
+            !props.stop,
+        },
+      ]"
+      @click.stop="$emit('edit')"
+      @mouseover="toggleTooltip(true, editTooltip)"
+      @mouseout="toggleTooltip(false)"
+    >
+      <PencilSquareIcon class="icon" aria-hidden="true" />
+    </button>
+    <button
+      v-if="props.config"
+      type="button"
+      :class="[
+        'action-btn std-blue',
+        {
+          'rounded-l-md': !props.add && !props.view && !props.edit,
+        },
+        {
+          'rounded-r-md':
+            !props.delete &&
+            !props.schedule &&
+            !props.download &&
+            !props.play &&
+            !props.refresh &&
+            !props.stop,
+        },
+      ]"
+      @click.stop="$emit('config')"
+      @mouseover="toggleTooltip(true, props.configTooltip)"
+      @mouseout="toggleTooltip(false)"
+    >
+      <Cog8ToothIcon class="icon" aria-hidden="true" />
+    </button>
+    <button
+      v-if="props.schedule"
+      type="button"
+      :class="[
+        'action-btn std-blue',
+        {
+          'rounded-l-md':
+            !props.add && !props.view && !props.edit && !props.config,
+        },
+        {
+          'rounded-r-md':
+            !props.delete &&
+            !props.download &&
+            !props.play &&
+            !props.refresh &&
+            !props.stop,
+        },
+      ]"
+      @click.stop="$emit('schedule')"
+      @mouseover="toggleTooltip(true, 'Schedule')"
+      @mouseout="toggleTooltip(false)"
+    >
+      <ClockIcon class="icon" aria-hidden="true" />
+    </button>
+    <button
+      v-if="props.play"
+      type="button"
+      :class="[
+        'action-btn std-green',
+        {
+          'rounded-l-md':
+            !props.add &&
+            !props.view &&
+            !props.edit &&
+            !props.schedule &&
+            !props.config,
+        },
+        {
+          'rounded-r-md':
+            !props.delete && !props.download && !props.refresh && !props.stop,
+        },
+      ]"
+      @click.stop="$emit('play')"
+      @mouseover="toggleTooltip(true, playTooltip)"
+      @mouseout="toggleTooltip(false)"
+    >
+      <PlayIcon class="icon" aria-hidden="true" />
+    </button>
+    <button
+      v-if="props.stop"
+      type="button"
+      :class="[
+        'action-btn std-red',
+        {
+          'rounded-l-md':
+            !props.add &&
+            !props.view &&
+            !props.edit &&
+            !props.config &&
+            !props.play &&
+            !props.schedule,
+        },
+        {
+          'rounded-r-md': !props.delete && !props.download && !props.refresh,
+        },
+      ]"
+      @mouseover="toggleTooltip(true, 'Stop')"
+      @mouseout="toggleTooltip(false)"
+      @click.stop="$emit('stop')"
+    >
+      <StopIcon class="icon" aria-hidden="true" />
+    </button>
+    <button
+      v-if="props.refresh"
+      type="button"
+      :class="[
+        'action-btn std-blue',
+        {
+          'rounded-l-md':
+            !props.add &&
+            !props.view &&
+            !props.edit &&
+            !props.config &&
+            !props.play &&
+            !props.schedule &&
+            !props.stop,
+        },
+        {
+          'rounded-r-md': !props.delete && !props.download,
+        },
+      ]"
+      @mouseover="toggleTooltip(true, refreshTooltip)"
+      @mouseout="toggleTooltip(false)"
+      @click.stop="$emit('refresh')"
+    >
+      <ArrowPathIcon class="icon" aria-hidden="true" />
+    </button>
+    <button
+      v-if="props.download"
+      type="button"
+      :class="[
+        'action-btn std-blue',
+        {
+          'rounded-l-md':
+            !props.add &&
+            !props.view &&
+            !props.edit &&
+            !props.config &&
+            !props.play &&
+            !props.schedule &&
+            !props.stop &&
+            !props.refresh,
+        },
+        {
+          'rounded-r-md': !props.delete,
+        },
+      ]"
+      @mouseover="toggleTooltip(true, downloadTooltip)"
+      @mouseout="toggleTooltip(false)"
+      @click.stop="$emit('download')"
+    >
+      <ArrowDownTrayIcon class="icon" aria-hidden="true" />
+    </button>
+    <button
+      v-if="props.delete"
+      type="button"
+      :class="[
+        'action-btn std-red rounded-r-md',
+        {
+          'rounded-l-md':
+            !props.add &&
+            !props.view &&
+            !props.edit &&
+            !props.config &&
+            !props.play &&
+            !props.schedule &&
+            !props.download &&
+            !props.refresh &&
+            !props.stop,
+        },
+      ]"
+      @mouseover="toggleTooltip(true, deleteTooltip)"
+      @mouseout="toggleTooltip(false)"
+      @click.stop="$emit('delete')"
+    >
+      <TrashIcon class="icon" aria-hidden="true" />
+    </button>
+    <Tooltip
+      v-if="!hideTooltip"
+      :tooltip="tooltip"
+      :showingTooltip="showingTooltip"
+      direction="top"
+      style="transform: translateY(-40%)"
+    />
+  </span>
+</template>
+<script setup>
+import {
+  ArrowDownTrayIcon,
+  ClockIcon,
+  EyeIcon,
+  PencilSquareIcon,
+  PlayIcon,
+  PlusIcon,
+  TrashIcon,
+  ArrowPathIcon,
+  StopIcon,
+  Cog8ToothIcon,
+} from "@heroicons/vue/20/solid";
+import { Tooltip } from "..";
+import { ref } from "vue";
+
+const props = defineProps({
+  add: {
+    type: Boolean,
+    default: false,
+  },
+  view: {
+    type: Boolean,
+    default: false,
+  },
+  edit: {
+    type: Boolean,
+    default: false,
+  },
+  play: {
+    type: Boolean,
+    default: false,
+  },
+  config: {
+    type: Boolean,
+    default: false,
+  },
+  delete: {
+    type: Boolean,
+    default: false,
+  },
+  schedule: {
+    type: Boolean,
+    default: false,
+  },
+  download: {
+    type: Boolean,
+    default: false,
+  },
+  refresh: {
+    type: Boolean,
+    default: false,
+  },
+  stop: {
+    type: Boolean,
+    default: false,
+  },
+  addTooltip: {
+    type: String,
+    default: "Add",
+  },
+  viewTooltip: {
+    type: String,
+    default: "View",
+  },
+  editTooltip: {
+    type: String,
+    default: "Edit",
+  },
+  configTooltip: {
+    type: String,
+    default: "Configure",
+  },
+  playTooltip: {
+    type: String,
+    default: "Run",
+  },
+  refreshTooltip: {
+    type: String,
+    default: "Refresh",
+  },
+  downloadTooltip: {
+    type: String,
+    default: "Download",
+  },
+  deleteTooltip: {
+    type: String,
+    default: "Delete",
+  },
+  hideTooltip: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emits = defineEmits([
+  "edit",
+  "delete",
+  "view",
+  "add",
+  "config",
+  "schedule",
+  "download",
+  "play",
+  "refresh",
+  "stop",
+]);
+
+const tooltip = ref("");
+const showingTooltip = ref(false);
+
+function toggleTooltip(flag, val = "") {
+  showingTooltip.value = flag;
+  tooltip.value = val;
+}
+</script>