ya fucki

zero.Web.UI/components/forms/error.vue

@@ -1,5 +1,5 @@
 <template>
-  formData: {{formData}}
+  <!--formData: {{formData}}-->
   <div class="ui-error" v-if="visible">
     <ui-message v-for="error in errors" :key="error.id" type="error" :text="error.message" :title="error.field" />
   </div>

zero.Web.UI/components/forms/form-header.vue

@@ -1,16 +1,16 @@
 <template>
   <ui-header-bar class="ui-form-header" :back-button="true">
     <template v-slot:title>
-      <h2 class="ui-header-bar-title" :class="{'is-empty': title && !value.name}">
-        <input class="ui-form-header-title-input" type="text" v-model="value.name" v-localize:placeholder="title" :readonly="titleDisabled || disabled" />
-        <!--<ui-alias class="ui-form-header-title-alias" v-if="hasAlias" v-model="value.alias" :name="value.name" :disabled="disabled" />-->
-        <!--<span v-localize="value.name || title"></span>-->
+      <h2 class="ui-header-bar-title" :class="{'is-empty': title && !modelValue.name}">
+        <input class="ui-form-header-title-input" type="text" v-model="modelValue.name" v-localize:placeholder="title" :readonly="titleDisabled || disabled" />
+        <!--<ui-alias class="ui-form-header-title-alias" v-if="hasAlias" v-model="modelValue.alias" :name="modelValue.name" :disabled="disabled" />-->
+        <!--<span v-localize="modelValue.name || title"></span>-->
       </h2>
     </template>
     <div class="ui-form-header-aside">
       <slot></slot>
       <div v-if="activeToggle" class="ui-form-header-toggle">
-        <ui-toggle v-model="value.isActive" class="is-primary" off-content="@ui.inactive" :off-warning="true" on-content="@ui.active" :content-left="true" :disabled="disabled" />
+        <ui-toggle v-model="modelValue.isActive" class="is-primary" off-content="@ui.inactive" :off-warning="true" on-content="@ui.active" :content-left="true" :disabled="disabled" />
       </div>
       <ui-dropdown v-if="actionsDefined && !disabled" align="right">
         <template v-slot:button>
@@ -32,36 +32,17 @@
     emits: ['delete'],
 
     props: {
-      title: {
-        type: String,
-        default: null
-      },
-      value: {
-        type: Object
-      },
+      title: String,
+      modelValue: Object,
+      disabled: Boolean,
+      titleDisabled: Boolean,
+      state: String,
+      isCreate: Boolean,
+      activeToggle: Boolean,
       canDelete: {
         type: Boolean,
         default: true
       },
-      disabled: {
-        type: Boolean,
-        default: false
-      },
-      titleDisabled: {
-        type: Boolean,
-        default: false
-      },
-      state: {
-        type: String
-      },
-      isCreate: {
-        type: Boolean,
-        default: false
-      },
-      activeToggle: {
-        type: Boolean,
-        default: false
-      },
       hasAlias: {
         type: Boolean,
         default: true

zero.Web.UI/components/forms/form.vue

@@ -1,6 +1,6 @@
 <template>
   <form class="ui-form" @keydown="onKeydown" @submit.prevent="onSubmit" @change="onChange">
-    <slot v-if="loadingState === 'default'" v-bind="slotProps" />
+    <slot v-if="loadingState === 'default'" :state="state" :is-shared="isShared" />
     <div v-if="loadingState == 'loading'" class="ui-form-loading">
       <i class="ui-form-loading-progress"></i>
     </div>
@@ -43,10 +43,6 @@
       errors: [],
       canEdit: true,
       isShared: false,
-      slotProps: {
-        state: null,
-        isShared: false
-      },
       submitBlocked: false
     }),
 
@@ -59,14 +55,6 @@
       {
         this.$emit('load', this);
       },
-      state(val)
-      {
-        this.slotProps.state = val;
-      },
-      isShared(val)
-      {
-        this.slotProps.isShared = val;
-      },
       canEdit(val)
       {
         this.$nextTick(() =>
@@ -79,7 +67,6 @@
 
     created()
     {
-      this.slotProps.state = this.state;
       this.$emit('load', this);
     },
 
@@ -351,6 +338,7 @@
       // find all error components in form
       getErrorComponents()
       {
+        return []; // TODO parent.$children does not exist anymore in vue3
         let errorComponents = [];
 
         // find components which can output errors

zero.Web.UI/components/forms/rte.pell.dependency.js

@@ -1,262 +1,249 @@
-(function (global, factory)
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var defaultParagraphSeparatorString = 'defaultParagraphSeparator';
+var formatBlock = 'formatBlock';
+var addEventListener = function addEventListener(parent, type, listener)
 {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-    typeof define === 'function' && define.amd ? define(['exports'], factory) :
-      (factory((global.pell = {})));
-}(this, (function (exports)
+  return parent.addEventListener(type, listener);
+};
+var appendChild = function appendChild(parent, child)
 {
-  'use strict';
+  return parent.appendChild(child);
+};
+var createElement = function createElement(tag)
+{
+  return document.createElement(tag);
+};
+var queryCommandState = function queryCommandState(command)
+{
+  return document.queryCommandState(command);
+};
+var queryCommandValue = function queryCommandValue(command)
+{
+  return document.queryCommandValue(command);
+};
 
-  var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+var exec = function exec(command)
+{
+  var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  return document.execCommand(command, false, value);
+};
 
-  var defaultParagraphSeparatorString = 'defaultParagraphSeparator';
-  var formatBlock = 'formatBlock';
-  var addEventListener = function addEventListener(parent, type, listener)
-  {
-    return parent.addEventListener(type, listener);
-  };
-  var appendChild = function appendChild(parent, child)
-  {
-    return parent.appendChild(child);
-  };
-  var createElement = function createElement(tag)
-  {
-    return document.createElement(tag);
-  };
-  var queryCommandState = function queryCommandState(command)
-  {
-    return document.queryCommandState(command);
-  };
-  var queryCommandValue = function queryCommandValue(command)
-  {
-    return document.queryCommandValue(command);
-  };
+var defaultActions = {
+  bold: {
+    icon: '<b>B</b>',
+    title: 'Bold',
+    state: function state()
+    {
+      return queryCommandState('bold');
+    },
+    result: function result()
+    {
+      return exec('bold');
+    }
+  },
+  italic: {
+    icon: '<i>I</i>',
+    title: 'Italic',
+    state: function state()
+    {
+      return queryCommandState('italic');
+    },
+    result: function result()
+    {
+      return exec('italic');
+    }
+  },
+  underline: {
+    icon: '<u>U</u>',
+    title: 'Underline',
+    state: function state()
+    {
+      return queryCommandState('underline');
+    },
+    result: function result()
+    {
+      return exec('underline');
+    }
+  },
+  strikethrough: {
+    icon: '<strike>S</strike>',
+    title: 'Strike-through',
+    state: function state()
+    {
+      return queryCommandState('strikeThrough');
+    },
+    result: function result()
+    {
+      return exec('strikeThrough');
+    }
+  },
+  heading1: {
+    icon: '<b>H<sub>1</sub></b>',
+    title: 'Heading 1',
+    result: function result()
+    {
+      return exec(formatBlock, '<h1>');
+    }
+  },
+  heading2: {
+    icon: '<b>H<sub>2</sub></b>',
+    title: 'Heading 2',
+    result: function result()
+    {
+      return exec(formatBlock, '<h2>');
+    }
+  },
+  paragraph: {
+    icon: '&#182;',
+    title: 'Paragraph',
+    result: function result()
+    {
+      return exec(formatBlock, '<p>');
+    }
+  },
+  quote: {
+    icon: '&#8220; &#8221;',
+    title: 'Quote',
+    result: function result()
+    {
+      return exec(formatBlock, '<blockquote>');
+    }
+  },
+  olist: {
+    icon: '<i class="fth-list"></i>',
+    title: 'Ordered List',
+    result: function result()
+    {
+      return exec('insertOrderedList');
+    }
+  },
+  ulist: {
+    icon: '<i class="fth-menu"></i>',
+    title: 'Unordered List',
+    result: function result()
+    {
+      return exec('insertUnorderedList');
+    }
+  },
+  code: {
+    icon: '&lt;/&gt;',
+    title: 'Code',
+    result: function result()
+    {
+      return exec(formatBlock, '<pre>');
+    }
+  },
+  line: {
+    icon: '<i class="fth-minus"></i>',
+    title: 'Horizontal Line',
+    result: function result()
+    {
+      return exec('insertHorizontalRule');
+    }
+  },
+  link: {
+    icon: '<i class="fth-link"></i>',
+    title: 'Link',
+    result: function result()
+    {
+      var url = window.prompt('Enter the link URL');
+      if (url) exec('createLink', url);
+    }
+  },
+  image: {
+    icon: '&#128247;',
+    title: 'Image',
+    result: function result()
+    {
+      var url = window.prompt('Enter the image URL');
+      if (url) exec('insertImage', url);
+    }
+  }
+};
 
-  var exec = function exec(command)
-  {
-    var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    return document.execCommand(command, false, value);
-  };
+var defaultClasses = {
+  actionbar: 'pell-actionbar',
+  button: 'pell-button',
+  content: 'pell-content',
+  selected: 'pell-button-selected'
+};
 
-  var defaultActions = {
-    bold: {
-      icon: '<b>B</b>',
-      title: 'Bold',
-      state: function state()
+var init = function init(settings)
+{
+  var actions = settings.actions ? settings.actions.map(function (action)
+  {
+    if (typeof action === 'string') return defaultActions[action]; else if (defaultActions[action.name]) return _extends({}, defaultActions[action.name], action);
+    return action;
+  }) : Object.keys(defaultActions).map(function (action)
+  {
+    return defaultActions[action];
+  });
+
+  var classes = _extends({}, defaultClasses, settings.classes);
+
+  var defaultParagraphSeparator = settings[defaultParagraphSeparatorString] || 'div';
+
+  var actionbar = createElement('div');
+  actionbar.className = classes.actionbar;
+  appendChild(settings.element, actionbar);
+
+  var content = settings.element.content = createElement('div');
+  content.contentEditable = true;
+  content.className = classes.content;
+  content.oninput = function (_ref)
+  {
+    var firstChild = _ref.target.firstChild;
+
+    if (firstChild && firstChild.nodeType === 3) exec(formatBlock, '<' + defaultParagraphSeparator + '>'); else if (content.innerHTML === '<br>') content.innerHTML = '';
+    settings.onChange(content.innerHTML);
+  };
+  content.onkeydown = function (event)
+  {
+    if (event.key === 'Enter' && queryCommandValue(formatBlock) === 'blockquote')
+    {
+      setTimeout(function ()
       {
-        return queryCommandState('bold');
-      },
-      result: function result()
-      {
-        return exec('bold');
-      }
-    },
-    italic: {
-      icon: '<i>I</i>',
-      title: 'Italic',
-      state: function state()
-      {
-        return queryCommandState('italic');
-      },
-      result: function result()
-      {
-        return exec('italic');
-      }
-    },
-    underline: {
-      icon: '<u>U</u>',
-      title: 'Underline',
-      state: function state()
-      {
-        return queryCommandState('underline');
-      },
-      result: function result()
-      {
-        return exec('underline');
-      }
-    },
-    strikethrough: {
-      icon: '<strike>S</strike>',
-      title: 'Strike-through',
-      state: function state()
-      {
-        return queryCommandState('strikeThrough');
-      },
-      result: function result()
-      {
-        return exec('strikeThrough');
-      }
-    },
-    heading1: {
-      icon: '<b>H<sub>1</sub></b>',
-      title: 'Heading 1',
-      result: function result()
-      {
-        return exec(formatBlock, '<h1>');
-      }
-    },
-    heading2: {
-      icon: '<b>H<sub>2</sub></b>',
-      title: 'Heading 2',
-      result: function result()
-      {
-        return exec(formatBlock, '<h2>');
-      }
-    },
-    paragraph: {
-      icon: '&#182;',
-      title: 'Paragraph',
-      result: function result()
-      {
-        return exec(formatBlock, '<p>');
-      }
-    },
-    quote: {
-      icon: '&#8220; &#8221;',
-      title: 'Quote',
-      result: function result()
-      {
-        return exec(formatBlock, '<blockquote>');
-      }
-    },
-    olist: {
-      icon: '<i class="fth-list"></i>',
-      title: 'Ordered List',
-      result: function result()
-      {
-        return exec('insertOrderedList');
-      }
-    },
-    ulist: {
-      icon: '<i class="fth-menu"></i>',
-      title: 'Unordered List',
-      result: function result()
-      {
-        return exec('insertUnorderedList');
-      }
-    },
-    code: {
-      icon: '&lt;/&gt;',
-      title: 'Code',
-      result: function result()
-      {
-        return exec(formatBlock, '<pre>');
-      }
-    },
-    line: {
-      icon: '<i class="fth-minus"></i>',
-      title: 'Horizontal Line',
-      result: function result()
-      {
-        return exec('insertHorizontalRule');
-      }
-    },
-    link: {
-      icon: '<i class="fth-link"></i>',
-      title: 'Link',
-      result: function result()
-      {
-        var url = window.prompt('Enter the link URL');
-        if (url) exec('createLink', url);
-      }
-    },
-    image: {
-      icon: '&#128247;',
-      title: 'Image',
-      result: function result()
-      {
-        var url = window.prompt('Enter the image URL');
-        if (url) exec('insertImage', url);
-      }
+        return exec(formatBlock, '<' + defaultParagraphSeparator + '>');
+      }, 0);
     }
   };
+  appendChild(settings.element, content);
 
-  var defaultClasses = {
-    actionbar: 'pell-actionbar',
-    button: 'pell-button',
-    content: 'pell-content',
-    selected: 'pell-button-selected'
-  };
-
-  var init = function init(settings)
+  actions.forEach(function (action)
   {
-    var actions = settings.actions ? settings.actions.map(function (action)
+    var button = createElement('button');
+    button.className = classes.button;
+    button.innerHTML = action.icon;
+    button.title = action.title;
+    button.setAttribute('type', 'button');
+    button.onclick = function ()
     {
-      if (typeof action === 'string') return defaultActions[action]; else if (defaultActions[action.name]) return _extends({}, defaultActions[action.name], action);
-      return action;
-    }) : Object.keys(defaultActions).map(function (action)
-    {
-      return defaultActions[action];
-    });
-
-    var classes = _extends({}, defaultClasses, settings.classes);
-
-    var defaultParagraphSeparator = settings[defaultParagraphSeparatorString] || 'div';
-
-    var actionbar = createElement('div');
-    actionbar.className = classes.actionbar;
-    appendChild(settings.element, actionbar);
-
-    var content = settings.element.content = createElement('div');
-    content.contentEditable = true;
-    content.className = classes.content;
-    content.oninput = function (_ref)
-    {
-      var firstChild = _ref.target.firstChild;
-
-      if (firstChild && firstChild.nodeType === 3) exec(formatBlock, '<' + defaultParagraphSeparator + '>'); else if (content.innerHTML === '<br>') content.innerHTML = '';
-      settings.onChange(content.innerHTML);
+      return action.result() && content.focus();
     };
-    content.onkeydown = function (event)
-    {
-      if (event.key === 'Enter' && queryCommandValue(formatBlock) === 'blockquote')
-      {
-        setTimeout(function ()
-        {
-          return exec(formatBlock, '<' + defaultParagraphSeparator + '>');
-        }, 0);
-      }
-    };
-    appendChild(settings.element, content);
 
-    actions.forEach(function (action)
+    if (action.state)
     {
-      var button = createElement('button');
-      button.className = classes.button;
-      button.innerHTML = action.icon;
-      button.title = action.title;
-      button.setAttribute('type', 'button');
-      button.onclick = function ()
+      var handler = function handler()
       {
-        return action.result() && content.focus();
+        return button.classList[action.state() ? 'add' : 'remove'](classes.selected);
       };
+      addEventListener(content, 'keyup', handler);
+      addEventListener(content, 'mouseup', handler);
+      addEventListener(button, 'click', handler);
+    }
 
-      if (action.state)
-      {
-        var handler = function handler()
-        {
-          return button.classList[action.state() ? 'add' : 'remove'](classes.selected);
-        };
-        addEventListener(content, 'keyup', handler);
-        addEventListener(content, 'mouseup', handler);
-        addEventListener(button, 'click', handler);
-      }
+    appendChild(actionbar, button);
+  });
 
-      appendChild(actionbar, button);
-    });
+  if (settings.styleWithCSS) exec('styleWithCSS');
+  exec(defaultParagraphSeparatorString, defaultParagraphSeparator);
 
-    if (settings.styleWithCSS) exec('styleWithCSS');
-    exec(defaultParagraphSeparatorString, defaultParagraphSeparator);
+  return settings.element;
+};
 
-    return settings.element;
-  };
-
-  var pell = { exec: exec, init: init };
-
-  exports.exec = exec;
-  exports.init = init;
-  exports['default'] = pell;
-
-  Object.defineProperty(exports, '__esModule', { value: true });
-
-})));
+export default {
+  exec,
+  init
+};

zero.Web.UI/components/forms/toggle.vue

@@ -1,10 +1,10 @@
  <template>
-  <div class="ui-toggle" :class="{'is-disabled': disabled, 'is-negative': negative, 'is-active': value, 'is-content-left': contentLeft }">
-    <input type="checkbox" :value="value" @input="onChange" :disabled="disabled" />
-    <span class="ui-toggle-switch" :class="{ 'is-active': value }"><i></i></span>
-    <i class="fth-minus-circle ui-toggle-off-warning" v-if="offContent && !value && offWarning"></i>
-    <span class="ui-toggle-text" v-if="onContent && value" v-localize="onContent"></span>
-    <span class="ui-toggle-text" v-if="offContent && !value" v-localize="offContent"></span>
+  <div class="ui-toggle" :class="{'is-disabled': disabled, 'is-negative': negative, 'is-active': modelValue, 'is-content-left': contentLeft }">
+    <input type="checkbox" :modelValue="modelValue" @update:modelValue="onChange" :disabled="disabled" />
+    <span class="ui-toggle-switch" :class="{ 'is-active': modelValue }"><i></i></span>
+    <i class="fth-minus-circle ui-toggle-off-warning" v-if="offContent && !modelValue && offWarning"></i>
+    <span class="ui-toggle-text" v-if="onContent && modelValue" v-localize="onContent"></span>
+    <span class="ui-toggle-text" v-if="offContent && !modelValue" v-localize="offContent"></span>
   </div>
 </template>
 
@@ -16,7 +16,7 @@
     emits: ['input'],
 
     props: {
-      value: {
+      modelValue: {
         type: Boolean,
         default: false
       },
@@ -50,7 +50,7 @@
 
       onChange(ev)
       {
-        this.$emit('input', !this.value);
+        this.$emit('input', !this.modelValue);
       }
     }
   }